Next Build Lighthouse Testing

[mreed101]

Description

We would like to have a better understanding of any optimization improvements when moving from content-build to next-build.
The goal of this ticket is to use lighthouse testing to evaluate the performance between identical pages created by nextjs(next-build) and metalsmith(content-build).

Requirements

All pages tested should be noted in this ticket.
Data comparison should be done between the same routes

Pages
https://dev.va.gov/detroit-health-care/events/70531/
https://dev.va.gov/chillicothe-health-care/events/70560/
https://dev.va.gov/dayton-health-care/events/70576/
https://dev.va.gov/birmingham-health-care/events/70581/
https://dev.va.gov/birmingham-health-care/events/69409/

https://dev.va.gov/poplar-bluff-health-care/events
https://dev.va.gov/sioux-falls-health-care/events
https://dev.va.gov/altoona-health-care/events
https://dev.va.gov/coatesville-health-care/events
https://dev.va.gov/outreach-and-events/events

Acceptance Criteria

• Minimum of 5 pages tested
• Lighthouse reports attached to this ticket
• Any discernible conclusions listed in this ticket

[JeffKeeneVAGov]

I am assuming a better lighthouse score with Nextjs. I would like to see the Audit findings for each to see if the nextjs addressed any audit findings from the Metalsmith build. It would also be nice to see if the files/network calls were reduced as far as loading js files/modules.

[nfpappas-oddball]

even-70531-cb.pdf
even-70560-cb.pdf
event-70576-cb.pdf
event-70581-cb.pdf
even-69409-cb.pdf

Base reports from content build

[timcosgrove]

My tests for content-build for these URLs:

timcosgrove_lighthouse_cb.zip

[nfpappas-oddball]

Attached is my final testing files. Here is a brief summary of the desktop pages
In bold are improvements in italics is degradation

1. Altoona improved from 79 to 83
2. coatesvill improved from 56 to 66
3. sious falls degraded from 65 to 63
4. event 69409 degraded from 89 to 82
5. event 70531 improved from 89 to 92
6. event 70560 improved from 75 to 89
7. event 70576 improved from 94 to 97
8. event 70581 degraded from 90 to 89

Observation: it looks for the most part that we show improvement using next-build pages. Also looking at the images side by side, it looks like next build , on average , formats images differently.

Mobile summary:

1. altoona improved from 52 to 53
2. coatesvill improved from 29 to 31
3. event 69409 showed no change
4. event 70531 improved from 60 to 75
5. event 70560 improved from 57 to 72
6. event 70576 improved from 76 to 90
7. event 70581 degraded from 69 to 59
8. outreach listings improved from 54 to 55
9. sious falls degraded from 35 to 32

Observations: some of the page dom looks slightly different in terms of elements. For the most part it looks like we improved page loads. Pages also looked better in next on mobile.

Nick_Lighthouse.zip

[mreed101]

Adding lighthouse test for content build

jr_lighthouse_content_build.zip

[mreed101]

jr_lighthouse_next_build.zip

Conclusion from reports.

Content Build tends to beat Next Build in SEO due to 2 missing meta tags.

• Missing rel=canonical
• Missing meta description (missing from CB as well but should be added)

Next Build is in fact faster than Content Build by roughly 20%.

• First contentful paint is on average 20% - 25% faster than content build
• Lighthouse scoring has next build preforming slightly worse when images are loaded due to the lazy loading of images. This causes the last contentful paint to take longer and lowers the overall score being reported.
• We can tell that next build outperforms content build when looking at reports for pages that have no images, similar to 70576.

Conclusion:

• Next is faster than content build.
• Next needs some minor updates to meta tags to ensure we have the same SEO scores as content build
• Next lazy loads all images which can cause a performance score hit from lighthouse when you lazy load an image above the fold. In these cases the content is still in front of the user first at a faster speed.
• There is a bug on the event page around the "register" button that hurts CEO in Next. The bug is due to the link not having an associated href="" on the tag
• Image loading times can be increased by using a CDN or optimizing the formats being used

[timcosgrove]

Next Build counterpart to the Content Build tests from last week.

next-lighthouse.zip

[mreed101]

NextJS Performance Takeaways

• NextJS is creating smaller and more optimized files by leveraging code splitting and minification which comes out of the box.
• The Next Image component automatically lazy loads images. We can speed up our Last Contentful Paint times if we set the image components priority attribute for images that are above the fold. Speed gains can also be increased if we utilize the placeholder attribute of the image component which can prevent layout shifts.
• Render blocking can be improved by leveraging the next script component which can allow us to load css async and defer the loading of javascript files.
• Nextjs automatically includes polyfills but will ignore loading them for more modern browsers.

Areas to Improve

• The separation of vets-website prevents us from using the advantages gained by nextjs code splitting and minifying code.
• The nextjs Image component support more modern image types such as .webp but this would require editors actually using the format type.
• http/2 would allow us to make simultaneous request which would have performance improvements.
• The lack of a cdn drastically slows down how quickly we are able to serve images to users.

[JeffKeeneVAGov]

Can I have any numbers that show the difference? Avg improvement of LCP etc...

nevermind i think I cna piece together stuff from above

[mreed101]

First Contentful Paint times

Content Build (CB) vs Next Build (NB).
The number to the left represents the event id

• 69409 CB 1.3ms NB 0.8ms Desktop
• 69409 CB 2.9ms NB 2.8ms Mobile
• 70531 CB 1.4ms NB 1.1ms Desktop
• 70531 CB 3.1ms NB 2.7ms Mobile
• 70560 CB 1.1ms NB 0.8ms Desktop
• 70560 CB 2.9ms NB 2.6ms Mobile
• 70576 CB 1.3ms NB 0.8ms Desktop
• 70576 CB 2.9ms NB 2.6ms Mobile
• 70581 CB 1.1ms NB 0.8ms Desktop
• 70581 CB 3.0ms NB 2.8ms Mobile

This give us an average increase of roughly 19.1%

Static Page Index Sizes

When looking at the compressed files that both nextjs (NB) and metal smith (CB) creates, we can see that Next Build files are significantly smaller.

For the same index page of event 44988 we get the following file sizes

• Content Build 197kb
• Next Build 37kb

An almost 80% reduction

[nfpappas-oddball]

lighthouseReports-nick.zip
Here are the results from my content build staging numbers