PageSpeed Insights

More for fun than any other reason, I like to keep my site as close to possible to 100 on Lighthouse and PageSpeed Insights. For most of the metrics I am in the green, at or close to 100%.

On some pages, normally those with many images, I struggle with "Largest Contentful Paint" (LCP). I am not sure there is much I can do about this as I am dependent on GitHub for how long it takes to load the images. I could try optimising the images further, but they are already resized to 800px and saved in WEBP format. Probably they could be smaller when viewed on mobiles, but I really can't be bothered at the moment with managing different sized versions of the same image. 🤷‍♂️

However, I then noticed that my site was nearly always failing on "Cumulative Layout Shift" (CLP), including pages without images. This I found strange because my site uses next to no JavaScript or other trickery, so why should there be a layout shift on pages which are pure text? It turns out the problem is my use of web fonts. Whilst the browser loads the font file, it displays the page in the system's default font. When it then applies the web font a short time later, this will affect the layout of the text, which then shifts. The solution to this problem is to use font-display: optional instead of font-display: swap. This avoids the font swap if the web fonts are not loaded fast enough. It means on the first view, the user might not view the site in my intended font. But by the second view, the font file will have been cached and the web font will kick in.

My CLP went from a quarter of a second to a few hundreds of a second. Magic! 🧙‍♂️