Recently, there have been proposed updates for WordPress 5.9 that would actually improve Core Web Vitals… automatically.
The proposals would see Largest Contentful Paint scores increase by up to an impressive 33%.
In the proposals, which were released by WordPress on their developer section of the site, they described how an updated version of WordPress would automatically use lazy loading behavior by default.
During its testing phase, it found that this change boosted Core Web Vitals scores by an average of between 7% and 33%.
The proposal reports that: “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.”
Largest Contentful Paint plus lazy loading
Largest Contentful Paint measures the loading performance of a webpage. Specifically, it measures how long it takes from the page beginning to load to the image or the largest text block loads.
Ideally, the time of Largest Contentful Paint should be under 2.5 seconds.
Lazy loading speeds up the download of a page by delaying certain web page elements – like iframes and images – that are not required at the time. It usually means those web page elements that are below the fold and thus wouldn’t be seen by a site visitor.
So these elements can be delayed by using an HTML attribute called the loading attribute. An image, for example, is an HTML web page element. The loading attribute edits the image by telling the browser to delay downloading it.
Loading attribute communicates things such as telling the browser to delay the downloading of an image, which in turn lightens the load when it comes to the capacity to download more important page elements that are needed for the immediate user experience – making the page interaction faster.
In the code, an image typically looks like this:
<img src=”image here.jpg” alt=”text here”>
In the code, lazy loading looks like this:
<img src=”image here.jpg” alt=”text here” loading=”lazy”>
Important to keep in mind is that since WordPress version 5.5, lazy loading is built into the core code for all images and iframes. The issue is that you don’t want lazy loading for all images because you want those images and logos at the top of the page to load as fast as possible.
This was done by WordPress because they were unable to detect which images are featured and which are candidates for lazy loading. The complication comes from the fact that all themes are coded differently.
And so this expected improvement in its lazy loading capabilities is a clear statement in how WordPress wants to elevate its websites.
WordPress has already carried out tests and we can take a look at some of them now:
In the test, WordPress devs excluded the lazy loading attribute to the first image in the code. They then tested this on 50 of the most popular WordPress themes and found out that the average improvement in the score for Largest Contentful Page was 7%.
Next up, they tested the improvements when adding lazy loading to two elements. This resulted in LCP scores dropping by 2%. So it was discovered that broadening lazy loading to more than 1 element didn’t improve the score.
“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.”
PS: ArganoUV is one of the world’s leading Core Web Vitals specialists. Contact us to see how we can work together.
