The last two chapters of the 2022 Web Almanac were released this week – Structured Data and Performance, completing the 729-page ebook of the report. The WordPress-specific chapter was published earlier this month with metrics that indicate adoption is growing.
The Performance chapter was written by Etsy performance engineer Melissa Ada and Google web transparency engineer Rick Viscomi. Performance metrics in the chapter focus on Core Web Vitals (CWV), which Google introduced in 2020 and made a ranking signal in 2021. They used the public Chrome UX Report (CrUX) dataset for the report, which collects data from eligible websites – publicly discoverable sites with an undisclosed minimum number of visitors.
Most of the data concerns the performance of the web as a whole over time, but the 2022 Web Almanac highlighted one specific concern regarding WordPress sites’ use of lazy-loading and its impact on LCP performance. Google defines Largest Contentful Paint metric (LCP) metrics as “the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.”
Lazy-loading is a good thing when used correctly, but these stats strongly suggest that there’s a major opportunity to improve performance by removing this functionality from LCP images in particular.
WordPress was one of the pioneers of native lazy-loading adoption, and between versions 5.5 and 5.9, it didn’t actually omit the attribute from LCP candidates. So let’s explore the extent to which WordPress is still contributing to this anti-pattern.
According to the CMS chapter, WordPress is used by 35% of pages. So it’s surprising to see that 72% of pages that use native lazy-loading on their LCP image are using WordPress, given that a fix has been available since January 2022 in version 5.9. One theory that needs more investigation is that plugins may be circumventing the safeguards built into WordPress core by injecting LCP images onto the page with the lazy-loading behavior.
Similarly, a disproportionately high percentage of pages that use custom lazy-loading are built with WordPress at 54%. This hints at a wider issue in the WordPress ecosystem about lazy-loading overuse. Rather than being a fixable bug localized to WordPress core, there may be hundreds or thousands of separate themes and plugins contributing to this anti-pattern.
Prior to WordPress 5.9, WordPress’ default of lazy loading implementation was causing slower LCP performance, because it had been applied too aggressively and was lazy-loading images above the fold. In 5.9, WordPress shipped a fix that more eagerly loads images within the initial viewport while lazy-loading the rest. That’s why results that show WordPress sites overusing lazy-loading are surprising.
“Admittedly, ‘lazy-overloading’ a hard problem to solve,” Viscomi said in his Twitter thread analysis. “We don’t always know whether an image will be the LCP. WordPress core sets it on every image by default and uses heuristics to unset it. Nearly 3/4 of pages that natively lazy-load images are on WordPress.”
In 2020, Viscomi remarked on how quickly the adoption of native image lazy-loading shot up after WordPress 5.5 was released in August of that year with images lazy-loaded by default. WordPress has been driving adoption of this feature, which is why any implementation “anti-pattern,” as Viscomi characterized it, has an outsized effect on the performance of the web.
As of October, 10.6% of the web is using native image lazy loading, per @HTTPArchive. That number was 1.5% in July! 🤯
This appears to be _entirely_ driven by WordPress at 28.9% of WP pages, which makes up one third of the web.https://t.co/QYGyyctFgc
left: all web
right: WP pic.twitter.com/RQnDw4UZ56
“What gives, WordPress?” Viscomi said. “My theory is that it’s not the core heuristics that are wrong, it’s the plugins. Also, keep in mind that the majority of pages that even use lazy-loading are WP.
“To support the plugin theory, let’s look at custom lazy-loading of LCP: More than half of the pages that do it are built with WordPress. WordPress is ‘only’ a third of the web, so there’s clearly something going on with JS-based lazy-overloading in WP.”
On WordPress.org there are multiple pages of performance, caching, and image and video optimization plugins that are using lazy-loading in some way. Plugin and theme developers who are using lazy-loading in their extensions may want to test their implementations to see if they are having a negative impact on LCP performance.
Why does WP lazy load images above the fold by default? Seriously…..
It doesn’t anymore. They fixed that in 5.9.
The filter may not currently be working for FSE themes: https://github.com/WordPress/gutenberg/issues/45224
One of Optimole’s plus points is that it supports all image types, including AVIF. This freemium lazy load plugin provides WordPress image optimization and scaling to fit them on visitors’ devices, ensuring optimal user experience.
Gutenberg contributor Andrew Serong has created a draft exploratory PR for adding opt-in, server-rendered background support for blocks, which would save background image values to the block’s style attribute in a backgroundImage key. Serong created the PR as a rough, experimental approach and published a few screenshots of how the inspector controls might fit in. However, Gutenberg designers are working on a more refined design for background support in the editor.
Today, Gutenberg designers Joen Asmussen and Javier Arce published a GitHub issue with their vision for a complete reorganization of background controls that includes layer management, layer reordering, and support for filters/blend modes.
Your email address will not be published.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable