WordPress published an article in their developer section proposing to refine WordPress’ default lazy loading behavior. Testing revealed that the proposed change improved a Core Web Vitals performance metric by a median average of 7% to as high as 33%. The proposed update for WordPress 5.9 may automatically improve Largest Contentful Paint scores by significant margins.
This proposal states that fine-grain control of the lazy loading attribute belongs in the hands of theme developers. It was found that refining how the lazy loading is added results in significant improvements in the Core Web Vitals metric called Largest Contentful Paint
Lazy loading is a way to speed up the perceived download of a page by delaying the download of web page elements such as images and iframes that are not needed at the moment. Using lazy loading, elements like images that are not viewable in the site visitor’s browser screen can be delayed by using an HTML attribute called the loading attribute.
Largest Contentful Paint (LCP)
Lazy loading is a way to speed up the perceived download of a page by delaying the download of web page elements such as images and iframes that are not needed at the moment. Using lazy loading, elements like images that are not viewable in the site visitor’s browser screen can be delayed by using an HTML attribute called the loading attribute.
The loading attribute tells the browser to delay downloading an image, freeing the browser to download more important page elements that are immediately viewable to the website visitor. This makes the page interactive faster for the site visitor.
Largest Contentful Paint (LCP) measures how fast images and other elements download in the site visitors’ viewport (the browser screen that the visitor sees).
The developer who published the proposal to improve LCP noted that as of WordPress 5.5, the core code added the lazy loading attribute by default to all images and iframes. WordPress implemented lazy loading like this because it had no way to accurately exclude the most important images from receiving the lazy loading attribute.
The reason is that all themes are coded differently and this kind of granular exclusion is best done by the theme developers for that reason. The WordPress developer team is proposing to exclude adding the lazy loading attribute to the first image or iframe in the code. This will improve the Largest Contentful Paint.
The developer tested this method on the top 50 most popular WordPress themes and discovered that adding it to the first image or iframe element provided an average improvement in the LCP Core Web Vitals score by an average of 7%.
The developer next tested how well LCP improved by adding lazy loading to two elements. The performance gains dropped by an average of 2%, making it clear that excluding lazy loading from more than one element did not improve LCP any better.
5% of themes in the test group scored LCP scores that were 10% worse to as high as 21% worse.
Testing
42% of the themes improved LCP scores from 10% to as high as 33% better.
Testing revealed that the benefits were better for the majority of the tested themes.
According to the WordPress proposal: “While the median LCP improvement across all themes is only 7%, there are larger notable wins for a significant number of themes, while notable losses are minimal.”
The timeline for the improved lazy loading behavior is currently set for WordPress 5.9 and is set to be released in December 2021.
The proposal for the improved lazy loading feature is currently undergoing discussion and has so far met with a positive response in the comments. So unless a currently unforeseen issue arises, improved Largest Contentful Paint scores may be coming to WordPress sites later this year.
Citations
Official WordPress Proposal Announcement
Refining WordPress Core’s Lazy-loading Implementation
WordPress GitHub Page for Lazy Loading Improvement
Omit Lazy-loading Attribute on First Content Image/iframe