WordPress has published an article in its developer section proposing to refine the default loading behavior of WordPress. Testing revealed that the proposed change improved a Core Web Vitals performance metric by a median average of 7% to 33%.
Core Web Vitals improvement proposal in WordPress
The proposal states that fine control of the lazy loading attribute rests with theme developers.
That said, refining the way lazy loading is added by default has been found to lead to significant improvements in the Core Web Vitals metric called Largest Contentful Paint.
Here is how the proposal describes the improvement:
“Instead of default loading all images and iframes by default, the very first content image (considering featured images as well) or content iframe should not be loaded lazily.
This is a more sensitive default than the one used by the current implementation, which on medium to large scales will result in better LCP out-of-the-box performance, while maintaining low bandwidth necessary.
Lazy loading and bigger content painting
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.
By using lazy loading, elements such as images that are not visible on the site visitor’s browser screen can be delayed using an HTML attribute called the loading attribute.
An image is an HTML element of a web page.
An HTML attribute is code that modifies an HTML element, such as an image.
The loading attribute modifies the image, in this case, telling the browser to delay its download.
The loading attribute tells the browser to delay downloading an image, freeing up the browser to download more important page elements that are immediately visible to the website visitor.
This makes the page interactive faster for the site visitor.
Largest Content Painting (LCP) measures how quickly the image and other elements load into a site visitor’s viewport (the browser screen the visitor sees).
An image is usually coded in HTML like this:
Adding lazy loading is simply adding the lazy loading HTML attribute:
How WordPress 5.9 Can Improve Greater Content Painting
The developer who posted the LCP improvement proposal noted that starting with WordPress 5.5, the core code added the lazy-loading attribute by default to all images and iframes.
But this is not ideal because images at the top of the page, like logos and featured images, need to be uploaded for the web page to become usable.
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 for this is that all themes are coded differently and this kind of granular exclusion is best done by theme developers for this reason.
While the current WordPress implementation of lazy loading by default wasn’t ideal, adding lazy loading this way is a definite improvement over not adding the loading attribute at all.
What is offered represents a marked improvement as demonstrated by the test results below.
Related: Advanced Core Web Vitals: A Tech Guide to SEO
How WordPress Will Improve the Greatest Content Painting
What the WordPress developer team proposes is to exclude adding the lazy loading attribute to the first image or iframe in the code.
The developer tested this method on the 50 most popular WordPress themes and found that adding it to the first image or iframe element resulted in an average LCP Core Web Vitals score improvement of 7% on average.
The developer then tested the LCP improvement by adding two-item lazy loading. Performance gains dropped by an average of 2%, which clearly shows that excluding lazy loading of more than one element did not improve the LCP any further.
Here are some of the findings:
“Omitting the first content frame from being lazily loaded resulted in a median LCP improvement of 7% (1877ms versus 2020ms with current core behavior) and a median increase in frame bytes of 0% (368 KB vs. 369 KB with current core behavior) → Omitting the first content frame clearly results in LCP improvement without noticeably regressing on saved frame bytes.
Omitting the first two content frames from lazy loading resulted in a median LCP improvement of 5% (1927ms versus 2020ms with the current baseline behavior) and a median frame byte increase of 2% ( 378 KB vs 369 KB with current base behavior). → Omitting the first two content frames produces worse results for both metrics than omitting only the first, i.e. it is better to only skip lazy loading for the first content frame , and therefore no additional tests with a larger number of non-lazy-loading images are needed.
New WordPress lazy loading test results
- 5% of themes in the test group had LCP scores ranging from 10% lower to 21% lower.
- 42% of themes improved LCP scores from 10% to 33%.
- Testing found the benefits to be better for the majority of themes tested.
According to the WordPress proposal:
“While the median LCP improvement across all themes is only 7%, there are larger noticeable gains for a significant number of themes, while noticeable losses are minimal.”
Related: 18 WordPress plugins that will speed up your site
Googler makes a proof of concept plugin
A WordPress Core committer created a Proof-of-concept (POC) patch as a pluginprobably for debugging purposes and published it on GitHub.
This is not an official version of the WordPress plugin, so it is not advised to rush and install it.
Official versions of plugins are published in the WordPress plugin repository.
When will refined lazy loading arrive?
The timeline for improved lazy loading behavior is currently set for WordPress 5.9.
WordPress 5.9 is currently slated for release in December 2021.
The proposal to improve the lazy loading functionality is currently under discussion and has so far been met with a positive response in the comments.
So, unless a currently unforeseen issue arises, it’s very possible that improved Largest Contentful Paint scores will hit WordPress sites later this year.
OOfficial announcement of the WordPress proposal
Refine the WordPress Core lazy loading implementation
WordPress GitHub page for lazy loading improvement
Omit lazy-load attribute on first content frame/iframe