WORDPRESS
WordPress 5.9 May Boost a Core Web Vitals Metric by Up to 33%
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%.
Proposal to Improve 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 and 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.
These are some of the findings:
“Omitting the first content image from being lazy-loaded resulted in a median LCP improvement of 7% (1,877ms compared to 2,020ms with current core behavior) and a median image bytes increase of 0% (368KB compared to 369KB with current core behavior). → Omitting the first content image clearly results in an LCP improvement while not noticeably regressing on image bytes saved.
Omitting the first two content images from being lazy-loaded resulted in a median LCP improvement of 5% (1,927ms compared to 2,020ms with current core behavior) and a median image bytes increase of 2% (378KB compared to 369KB with current core behavior). → Omitting the first two content images produces worse results for both metrics than only omitting the first one, i.e. it is better to only skip lazy-loading for the first content image, and therefore no additional tests with larger numbers of images not being lazy-loading are needed.”
New WordPress Lazy Loading Test 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.
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.”
Googler Makes a Proof of Concept Plugin
A WordPress Core committer created a proof of concept (POC) patch in plugin form, presumably for debugging purposes and published it on GitHub.
It’s not an official WordPress plugin release so it’s not advisable to rush out and install it.
Official plugin releases are posted in the WordPress plugin repository.
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.
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
