WordPress recently proposed a refinement to its default lazy loading behavior in an article published in their developer section. The proposed changes were tested and resulted in improvements to a Core Web Vitals performance metric by a median average of 7%, reaching up to 33% in some cases.
Proposal to Improve Core Web Vitals in WordPress
The proposal suggests that theme developers should have fine-grain control over the lazy loading attribute. It argues that refining the default lazy loading process can significantly enhance the Core Web Vitals metric known as Largest Contentful Paint (LCP).
Improvement Summary:
“Instead of lazy-loading all images and iframes by default, the first content image (including featured images) or content iframe should not be lazy-loaded. This more nuanced approach can improve LCP performance while maintaining low bandwidth usage.”
Lazy Loading and Largest Contentful Paint
Lazy loading speeds up the perceived page load time by delaying the download of non-essential elements like images and iframes. This is achieved using the loading HTML attribute, which instructs the browser to defer downloading these elements.
For example, a standard image HTML element looks like:
<img src="example.jpg" alt="example text">Adding the lazy loading attribute modifies it to:
<img src="example.jpg" alt="example text" loading="lazy">How WordPress 5.9 May Improve Largest Contentful Paint
Since WordPress 5.5, the core code has added the lazy loading attribute to all images and iframes by default. However, this is not ideal for important images like logos and featured images that need to load for the page to become usable. Theme developers are better positioned to handle these granular exclusions due to varied theme coding.
The proposed improvement aims to exclude the lazy loading attribute from the first image or iframe. Testing showed this method improved LCP scores by an average of 7%.
Findings:
“Omitting the first content image from lazy-loading resulted in a 7% LCP improvement with no significant increase in data size. Omitting the first two content images resulted in a 5% improvement, indicating that excluding more than one element does not yield better results.”
New WordPress Lazy Loading Test Results
- 5% of themes scored LCPs 10%-21% worse.
- 42% improved LCPs by 10%-33%.
- The majority of themes experienced performance benefits.
“While the median LCP improvement is 7%, notable gains were observed for many themes, with minimal losses.”
Googler Makes a Proof of Concept Plugin
A WordPress Core committer created a Proof of Concept (POC) plugin for testing purposes, published on GitHub. This plugin is not an official release, so immediate installation is not recommended.
When Will Refined Lazy Loading Arrive?
The improved lazy loading behavior is slated for WordPress 5.9, set to release in December 2021. The proposal has been positively received and is under discussion, suggesting that improved LCP scores may be implemented by the end of the 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.
