Lighthouse scores vary pretty widely, and there may be some things that are out of our control (including github page response times, API response times, etc). This work could fall into the 'premature optimisation category', but its worth looking for easy wins.
In a six-run session, our first LH perf score was abysmal and then generally improved: 67, 80, 90, 96, 87, 89, with Largest Contentful Paint being the biggest offender, with Cumulative Layout Shift also a factor. The average score is 84.8.
Poor CLS results from a combination of font loading and the arbitrary length of the article card content, which cannot be known concretely.
Work to stabilise the header and strapline is the lowest-hanging fruit for CLS:
Better adjust the banner and strapline with a closer font pairing.
Better calculate the nav pill dimensions at different screen sizes.
Beyond this, LCP was most affected by the images in the cards being lazy loaded, especially those 'above the fold'. As the content is dynamic:
Loading a base64 background placeholder image while the full href resolves.
Not marking the first cards (above the fold) as 'lazy'
Other paper cuts to check on:
Next-gen image types: This is an API issue, but it is worth checking the docs to see if it has been added since we started the project.
A longer caching policy for static resources such as fonts is recommended. I don't know if we have control of this with GH pages.
Lighthouse scores vary pretty widely, and there may be some things that are out of our control (including github page response times, API response times, etc). This work could fall into the 'premature optimisation category', but its worth looking for easy wins.
In a six-run session, our first LH perf score was abysmal and then generally improved: 67, 80, 90, 96, 87, 89, with Largest Contentful Paint being the biggest offender, with Cumulative Layout Shift also a factor. The average score is 84.8. Poor CLS results from a combination of font loading and the arbitrary length of the article card content, which cannot be known concretely.
Work to stabilise the header and strapline is the lowest-hanging fruit for CLS:
Beyond this, LCP was most affected by the images in the cards being lazy loaded, especially those 'above the fold'. As the content is dynamic:
Other paper cuts to check on: Next-gen image types: This is an API issue, but it is worth checking the docs to see if it has been added since we started the project. A longer caching policy for static resources such as fonts is recommended. I don't know if we have control of this with GH pages.