Fraser Boag

Don't lazyload everything - LCP performance issues

Back to all notes
11th July '23

Largest Contentful Paint (LCP) is a metric heavily promoted by Google as one of its Core Web Vitals. It concerns the render time of the single largest (in terms of file size) element within the viewport on page load. In many cases this will be an image.

Firstly, this stuff really matters when it comes to search rankings. A few articles on this website do very well on Google - by falling foul of LCP my search traffic immediately fell by around 50% within a matter of days of deploying the update which introduced the issue. Inspecting Google's Search Console also made this correlation very clear.

The issue itself was fairly simple - I deployed a new version of my website on which every image had a loading="lazy" attribute on it. I didn't really give this much thought when I was building it, naively assuming that this would be optimal for performance, but the delay in waiting for the bones of the web page to be rendered before the browser can start determining what is/isn't in the viewport and then making more requests clearly adds up, and I was getting abysmal LCP scores (3 to 4 seconds). This issue wasn't visible to me on a fast internet connection when using the website, everything appeared to load instantly, so you really need to rely on tools like Lighthouse to understand how search engine crawlers in particular are likely to parse your page.

To correct the issue I've simply ensured that images which are likely to be in the viewport on first page load do not have a loading="lazy" attribute and, for good measure, I've given these images a fetchpriority="high" attribute. As soon as I deployed this fix my Core Web Vitals shot up and I'm now seeing much healthier LCP times of around 0.3 to 0.4 seconds.

I'll try to remember to update this post in a couple of weeks once I find out whether or not my search traffic recovers.

More notesAll notes

Get in touch  —
Copyright © Fraser Boag 2013 - 2024. All rights reserved.