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 as much as 33%.
Improved Core Web Vitals in WordPress
The proposal states that fine grain control of the lazy loading attribute belongs in the hands of theme developers.
That said, it was found that by refining how the lazy loading is added by default results in significant improvements in the Core Web Vitals metric called Largest Contentful Paint.
This is how the proposal describes the improvement:
“Instead of lazy-loading all images and iframes by default, the very first content image (also considering featured images) or content iframe should not be lazy-loaded.
This is a more sensitive default than what the current implementation uses, that on average and at scale will result in better LCP performance out of the box, while keeping necessary bandwidth low.”
Lazy Loading: 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.
An image is a web page HTML element.
An HTML attribute is code that modifies an HTML element, like an image.
The loading attribute modifies the image, in this case, by telling the browser to delay downloading it.
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 image and other elements download in the site visitors viewport (the browser screen that the visitor sees).
An image is usually coded in HTML like this:
<img src="example.jpg" alt="example text">
Adding lazy loading is a simple matter of adding the lazy load HTML attribute:
<img src="example.jpg" alt="example text" loading="lazy">
How WordPress 5.9 May Improve Largest Contentful Paint
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.
But that’s not ideal because the images at the top of the page, like logos and featured images, need to download in order 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 is because all themes are coded differently and this kind of granular exclusion is best done by the theme developers for that reason.
While the current WordPress implementation of default lazy loading was not ideal, adding lazy loading in this manner is a clear improvement over not adding the loading attribute at all.
What’s being proposed represents a clear improvement as the test results listed below demonstrate.
How WordPress Will Improve Largest Contentful Paint
What the WordPress developer team is proposing is to exclude adding the lazy loading attribute to the first image or iframe in the code.
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.
New WordPress Lazy Loading Results
- 5% of themes in the test group scored LCP scores that were 10% worse to as high as 21% worse.
- 42% of the themes improved LCP scores from 10% to as high as a 33% better.
- Testing revealed that the benefits were better for the majority of the tested themes.
When Will Refined Lazy Loading Arrive?
The timeline for the improved lazy loading behavior is currently set for WordPress 5.9.
WordPress 5.9 is currently 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, it is very possible that improved Largest Contentful Paint scores may be coming to WordPress sites later this year.
Text Us
info@geekmob.ca
Schedule Zoom
Schedule Teams
