Learn with this tutorial how to improve the score of Web Vitals, specifically the Largest Contentful Paint (LCP), by customizing the lazy-loading of images.
WordPress 5.5 introduced quite a few new features, among them, lazy-loading.
This is a fantastic improvement as it doesn’t unnecessarily load images, but only loads them when the user scrolls to where they are.
The problem is that images that are above the fold or at the top visible part of the web are better to be loaded directly (not deferred).
To solve it from WordPress 5.9 you have a filter that allows you to customize from which image the lazy-loading is applied.
By default, WordPress will apply the exception only to the first image.
But, for example, in the OsomCode tutorial page what I want is that the exception is applied to 4 images, since they are the ones that are shown in the first display. One is the logo and the other 3 are the featured tutorial images that appear in a 3-column grid.
I leave you the scores of that page before and after applying this tutorial to give you an idea of the improvement
Let’s see how you can put this into practice:
Snippet to customize the deferred loading of images in WordPress
If your case is identical to the one I told you before, you would have to add the following snippet to the functions.php file or to your functionality plugin
To see this and another 1097 code snippets of this website, login or subscribe here.
With this fragment you indicate that in the page /tutorials/ should not apply lazy-loading to the first 4 images.
Obviously you can customize both the page and the number of images to your liking.
This would be another possible situation:
To see this and another 1097 code snippets of this website, login or subscribe here.
In this case you are ordering that:
- If it is the home page, do not apply lazy-loading to the first 2 images.
- And if it is an archive page or the blog page, do not apply lazy-loading to the first 3 images.
These are just examples, the idea is that you adjust it to the needs of your website or that of your customers.
Conclusions
Do you want to improve your Google Web Vitals score? Now you know how to improve the LCP (Largest Contentful Paint) parameter by excluding the first images from lazy-loading.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
