Right, this is an interesting one. It’s technical, but has a very simple main recommendation (in large text, below).
Google has started to include something they’re calling CLS in their ranking metrics.
Essentially it means ‘how long before elements loading on the site stop moving around’, and their target is just 0.25 seconds.
If things move around as your page loads for longer than that it’ll get a warning in their system. (This isn’t general loading time, just a very specific part of how a site loads.)
Think about when a website loads, the first thing it does is load the layout – where the menu is, where images will go, text, etc. That’s the elements they’re talking about.
It’s fine for a image to take longer to load, as long as the space it will take is already reserved for it when it DOES load. To be honest most of this happens so quickly you can’t even see it.
But there is one very common thing lots of sites have turned on that means layout changes happen long after a page is loaded – and that’s “lazy load” for images.
Lazy Load was a great technique when it became popular a decade ago. It meant images didn’t load on a page until the browser needed to se them. If an image was at the bottom of a page, and the user wouldn’t see it in the browser until they scrolled down, it waited until it needed to load it to do so.
But when that happens, it moves elements on the page around accordingly to make space for the image – and therefore will always fail the CLS test Google does for all sites and pages.
So ironically something that used to be recommended to help a page load faster is now a problem for passing loading time tests!
Personally I’ve not used Lazy load for years (in most cases it was unclear if the speed enhancement it brought was actually better than the extra Javascript it needed to work) – but now my recommendation to all website owners is clear:
