WordPress 5.9 can increase a basic Web Vitals metric by up to 33%


WordPress posted an article in its developer section proposing to fine-tune WordPress’ default lazy loading behavior. Testing found that the proposed change improved a Core Web Vitals performance metric by up to 33%.

Proposal to improve Core Web Vitals in WordPress

The proposal states that fine-grained control of the lazy loading attribute rests with theme developers.

That said, it was found that by fine-tuning the way lazy loading is added by default, significant improvements have been made to the Core Web Vitals metric called Largest Contentful Paint.

Here is how the proposal describes the improvement:

“Instead of loading all images and iframes by default, the very first image of content (also taking into account the images shown) or iframe content should not be loaded lazy.

This is a more sensitive default than that used by the current implementation, which on average and large scale will result in better LCP performance out of the box, while maintaining bandwidth. necessary low.

Lazy loading and larger content painting

Delayed 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 this time.

Publicity

Continue reading below

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 on 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, which allows the browser to download larger page elements that are immediately visible to the website visitor.

This makes the page interactive faster for the site visitor.

Largest Content Paint (LCP) measures the speed at which the image and other elements download in the visitor’s viewport of the site (the browser screen that the visitor sees).

An image is usually encoded in HTML like this:

example text

Adding lazy load is simply to add the HTML lazy load attribute:

example text

How WordPress 5.9 Can Improve Greatest Content Painting

The developer who posted the LCP improvement proposal noted that starting with WordPress 5.5, the base code added the lazy loading attribute by default to all images and iframes.

Publicity

Continue reading below

But that’s not ideal because the images at the top of the page like logos and featured images must be uploaded in order for the webpage to become usable.

WordPress implemented lazy upload like this because it had no way to precisely exclude the most important images from receiving the lazy upload attribute.

The reason is that all themes are coded differently and this type of granular exclusion is best done by theme developers for this reason.

While the current default lazy upload implementation on WordPress was not ideal, adding lazy upload in this way is a big improvement over not adding the upload attribute at all.

What is proposed represents a marked improvement as demonstrated by the results of the tests listed below.

How WordPress will improve the greatest content painting

What the WordPress developer team is proposing is to exclude adding the lazy loading attribute to the first image or iframe of 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 improvement in LCP Core Web Vitals score of 7% on average.

The developer then tested how much LCP improved by adding two-element lazy loading. Performance gains have fallen by an average of 2%, clearly showing that excluding lazy loading of multiple elements does not further improve LCP.

Here are some of the findings:

“Omitting the first image of content to be loaded lazy resulted in a median improvement in LCP of 7% (1,877 ms vs. 2,020 ms with the current baseline behavior) and a median increase in image bytes by 0% (368KB versus 369KB with current baseline behavior). → Omitting the first image of content clearly results in improved LCP while not significantly decreasing the saved image bytes.

The omission of the first two lazy load content images resulted in a median LCP improvement of 5% (1,927 ms vs. 2,020 ms with the current baseline behavior) and a median image byte increase of 2% ( 378KB versus 369KB with current base behavior). → Omitting the first two images of content produces poorer results for both metrics than omitting only the first, i.e. it is better to skip only the lazy-loading for the first image of content, and therefore no further testing with a larger number of non-lazy images. loading are required.

Publicity

Continue reading below

New WordPress lazy loading test results

  • 5% of the subjects in the test group had LCP scores ranging from 10% worse to 21% worse.
  • 42% of themes improved LCP scores from 10% to 33% better.
  • Testing found that the benefits were better for the majority of the themes tested.

According to the WordPress proposal:

“While the median improvement in LCP across all themes is only 7%, there are larger noticeable gains for a significant number of themes, while notable losses are minimal. “

Googler creates a proof of concept plugin

A WordPress Core committer created a proof of concept (POC) patch as a plugin, presumably for debugging purposes and posted it on GitHub.

This is not an official version of the WordPress plugin, so it is do not advised to rush and install it.

The official versions of the plugins are published in the WordPress plugin repository.

When will refined lazy loading arrive?

The timeline for improving lazy loading behavior is currently set for WordPress 5.9.

WordPress 5.9 is currently slated for release in December 2021.

The proposal for the improved lazy loading feature is currently under discussion and has so far received a positive response in the comments.

Publicity

Continue reading below

So, unless a currently unforeseen issue arises, it is very possible that improved scores of the larger content painting will be available on WordPress sites later this year.

Quotes

OOfficial announcement of the WordPress proposal
Refine the WordPress Core lazy loading implementation

WordPress GitHub page for lazy loading improvement
Omit lazy loading attribute on first content image / iframe

Previous Google adds option to instantly delete your last 15 minutes of search history
Next Mosquito pools are positive for Saint Louis encephalitis. | Open