The last two chapters of the Web Almanac 2022 were released this week: Structured Data and Performance, completing the 729-page ebook of the report. The WordPress specific chapter was released earlier this month with metrics indicating adoption is growing.
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 in 2021. They used the public dataset for the report Chrome UX Report (CrUX), which collects data from eligible websites , publicly discoverable sites with a minimum number of undisclosed visitors.
Most of the data is about the performance of the web as a whole 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 The Largest Contentful Paint metric (LCP) like “render time larger image or block of text visible within the viewport, compared to when the page started charging for the first time ".
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 by 35% of the pages . So it's surprising to see that 72% of pages using native slow loading on their LCP image are using WordPress, as a fix is available from January 2022 in version 5.9. One theory that needs further investigation is that plugins could bypass the safeguards built into the WordPress core by injecting LCP images into the page with the slow 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.
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.
"Admittedly, 'lazy load overload' is a difficult problem to solve“, Viscomi said in his Twitter thread analysis . “We don't always know if an image will be the LCP. The WordPress core sets this to every image by default and uses heuristics to override it. Almost 3/4 of the pages that natively load slow-loading images are in 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.
