The final two chapters of the Web Almanac 2022 were published this week: structured data and performance, completing the report's 729-page ebook. The WordPress-specific chapter was published earlier this month, with metrics indicating growing adoption.
The Performance chapter was written by Etsy performance engineer Melissa Ada and Google web transparency engineer Rick Viscomi. The performance metrics in the chapter focus on Core Web Vitals (CWV), which Google introduced in 2020 and created a ranking signal for in 2021. For the report, they used the public Chrome UX Report (CrUX) dataset , which collects data from eligible websites —publicly discoverable sites with an undisclosed minimum number of visitors.
Most of the data focuses on overall web performance over time, but the 2022 Web Almanac highlighted a specific concern regarding WordPress sites' use of lazy-loading and its impact on LCP performance. Google defines LCP (The Largest Contentful Paint metric) as "the rendering time of the largest image or block of text visible within the viewport, compared to when the page first began loading ."
Lazy loading or slow loading (also called upload on demand) is an optimization technique for online content, whether it's a website or a web app.
Instead of loading the entire web page and rendering it to the user at once as in bulk loading, the slow loading concept helps to load only the requested section and delays the rest until the user needs it.
Upload on demand reduces time and memory consumption, thereby optimizing content delivery. Since only a fraction of the required web page is loaded first, it takes less time and the rest of the section loads are delayed, saving storage space. All of this improves the user experience as the requested content is fed in no time.
Lazy loading is a good thing when used correctly, but these statistics strongly suggest that there is a great opportunity to improve performance by removing this feature specifically from LCP images.
WordPress was one of the pioneers in adopting native lazy loading, and between versions 5.5 and 5.9, it hasn't actually omitted the attribute from LCP candidates. So let's explore the extent to which WordPress is still contributing to this anti-model.
According to the CMS chapter, WordPress is used on 35% of pages . So it's surprising to see that 72% of pages using 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 further investigation is that plugins could bypass the safeguards built into WordPress core by injecting LCP images into the page with the lazy loading behavior.
Likewise, a disproportionately high percentage of pages using custom lazy loading are created with WordPress at 54%. This suggests a broader problem in the WordPress ecosystem about overuse of slow loading. Rather than being a fixable bug located in the WordPress core, there may be hundreds or thousands of separate themes and plugins contributing to this anti-pattern.
https://twitter.com/rick_viscomi/status/1585248422323372032
Prior to WordPress 5.9, WordPress' default implementation of slow loading caused slower LCP performance, as it was being applied too aggressively and loading images above the fold slowly. In version 5.9, WordPress provided a fix that more avidly loads images within the initial viewport while lazily loads the rest. That's why the results showing WordPress sites that use excessively slow loading are amazing.
“ Of course, 'lazy load overload' is a difficult problem to solve ,” Viscomi said in his analysis of the Twitter thread . “ We don't always know if an image will be the LCP. WordPress core sets it for every image by default and uses heuristics to override it. Nearly three-quarters of the pages that natively load lazy images are on WordPress.”
In 2020, Viscomi pointed out how quickly adoption of native image lazy loading has increased since the release of WordPress 5.5 in August of the same year with image lazy loading by default. WordPress has driven the adoption of this feature, which is why any “anti-pattern” implementation, as Viscomi called it, has a huge effect on web performance.
