WordPress 5.9 to Fix Lazy Loading Performance Regression, Resulting in 30% Faster Page Loads in Some Cases

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.”

8 responses to “WordPress 5.9 to Fix Lazy Loading Performance Regression, Resulting in 30% Faster Page Loads in Some Cases”

  1. Finally someone paid attention to this issue.
    Just yesterday I asked the Blocksy support how to mitigate this issue just for the featured images in blog post.

  2. Good development. It shouldn’t stop there. Most performance issues handled by plugins or third party services should be in the core. WordPress has to be more performance and security solid without plugins/third party services

  3. It would have been nice if WordPress would have prioritized fixing this this issue in a minute release updated over waiting for a major release with Gutenberg updates, but that’s kind of the MO for WordPress… Prioritizing new features over fixing current improper/buggy functionality.

    • It would have been nice if WordPress would have prioritized fixing this this issue in a minor release update over waiting for a major release with Gutenberg updates, but that’s kind of the MO for WordPress… Prioritizing new features over fixing current improper/buggy functionality.

  4. Such improvements will eventually lead to greater adoption of Gutenberg. This is what other WP page builders are missing.

  5. As probably many others, I was just pressing on my pro theme support team in order to arrange some fine tuning for the default lazy value.
    As seen on experimental static pages, eager makes things just faster when properly used. Blame no one, just get it done 😉

  6. I do not recommend upgrading your website to 5.9. Page speed for mobile devices drops from 96% to 69% (from A grade to C). I’m using the wp rocket plugin and I can’t solve this issue…

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: