WordPress sites may soon see a slight performance improvement on page loads, thanks to a fix for a performance regression in the core lazy loading feature. An analysis published in July 2021 showed that lazy loading applied too aggressively can have a negative impact on performance and that it’s better to eagerly load the images within the initial viewport.
WordPress’ default of lazy loading all images was causing slower performance on the Largest Contentful Paint metric (LCP) metric, which Google defines as “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.”
Google-sponsored WordPress contributors wrote a fix that avoids lazy-loading images above the fold and thoroughly tested it as part of their efforts to evaluate the impact of various past performance initiatives. The delayed LCP will be fixed in WordPress 5.9.
“This can be improved by skipping addition of loading='lazy' for the first content image or iframe, which in the vast majority of cases will appear within the initial viewport,” Felix Arntz said in the dev note. “WordPress can only make educated guesses around that and not be 100% certain, but an analysis taking into account 50 popular themes showed that the enhancement brought LCP improvements across the board, up to 30% faster page load.”
In the future, this implementation may be able to drill down further into the block content on the page and eagerly load whatever images the theme identifies as being within the viewport.
“Have you thought about how we could have more precise heuristics going forwards that can take the semantics and structure of blocks into account to get a sense for what is actually deferrable?” Matias Ventura commented on the ticket in process. “For example, an image block or a site logo used in a header template part would be strong indicatives of being above the fold. ‘The first image of the content’ seems instead like a rudimentary measure, that varies a lot depending on preceding layout. With block themes we should have some ahead-of-time awareness of layout which we can use to produce more meaningful instructions.”
Felix Arntz said he already has detecting the header template part on his radar and is willing to refine the implementation as the world of block themes expands.
“The refinement of the lazy-loading implementation should notably improve LCP performance for most sites that rely on it, while not having adverse effects for sites where the default heuristics described above do not apply to,” Arntz said. “That is only a solid starting point though. In the future, specifically with the more semantic content specification that block-based themes will facilitate, we will be able to further fine tune the lazy-loading implementation by using the available block information.”