Integrated into the core of WordPress 5.5, the lazy-loading attribute allows you to tell the browser to defer loading elements of a web page, such as images or iframes, which are not visible on the screen. The page can then load faster for the site visitor.
But it was found that this feature can regress the Largest Contentful Paint (LCP) metric of Core Web Vitals, which measures the speed at which images and other elements of a web page are downloaded to the display window of the Web Vitals. site.
The reason: “the WordPress core is not able to reliably assess whether an image will appear above or below the screen, as it depends on the currently active theme “.
A new way to integrate image lazy-loading in WordPress
If the precise control of this attribute remains the responsibility of the theme developers, WordPress could bring a significant gain in performance, including improving LCP scores from 7% to 33%, by refining the way in which the CMS integrates lazy-loading images.
This proposal, published by developer Felix Arntz, consists of excluding the addition of the lazy-loading attribute to the first image or iframe of the code.
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 lazy-loaded. This is a more sensitive default than that used by the current implementation, which at a medium to large scale will result in better LCP performance out of the box while maintaining bandwidth. necessary low, explains the developer.
Read more: 15 tips for your Instagram stories
Notable performance gains tested on 50 popular WordPress themes
This method has been tested on the 50 most popular WordPress themes and revealed the following:
- The omission of the first image of content resulted in a median improvement in LCP of 7% without observing a regression on the bytes of images saved,
- Omitting the first two images of content resulted in a median LCP improvement of 5% and a median image byte increase of 2%, resulting in lower performance,
- Disabling lazy-loading completely is not a solution to the performance problem.
Additional tests on the omission of the first content image have yielded even more significant results:
Looking further into the results for skipping the first content image, 42% of the scenarios resulted in a median improvement in LCP greater than 10%, with the maximum improvement being 33%. In 5% of the scenarios, the median LCP is more than 10%, the maximum here being 21%. 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.
If this proposal is validated, it could be introduced as part of the WordPress 5.9 update, which is scheduled for release in December 2021.
for website maintenance service contact us.