Integrated in 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 cannot 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 performance gain, 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, is to exclude adding the lazy-loading attribute to the first frame or iframe of the code.
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 content image resulted in a median improvement in LCP of 7% with no regression on the image bytes 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 a lower performance.
- Disabling lazy-loading completely is not a solution to the performance problem.
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.
