If Page Speed Insights mention, “Largest Contentful Paint image was lazily loaded“, this means the Featured Image of the post is lazily loaded. To avoid lazy loading of the featured image, you have 2 options. Either disable Lazy loading globally or just disable for Featured image.
If you prefer the first method, where you have only 1 image in the entire post, i.e. the featured image, you can simply follow this link to add 1 line of code to your functions.php, which disables sitewide lazy loading.
If you have multiple or more than 2 images on your site, you should only disable Lazy Loading for the featured image. There are 2 methods for this.
- Disabling Lazy Load for the first image through code.
- Using light weight plugin to do so.
Among all the methods tested, the first method is very unreliable. We believe that the light weight plugin method is the best, easy and reliable solution, which is explained below.
First install and activate this light weight plugin (240 KB)
Add the following code to your child theme’s functions.php file. Make sure to replace ‘attachment-large size-large’ with the correct class of the ‘featured image‘ in line 5. The class varies according to the theme and size set for the featured image.
/* Disable Default WordPress Lazy Loading */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
/* Rocket Loader Exclude Class */
function rocket_lazyload_exclude_class( array $attributes ) {
$attributes[] = 'class="attachment-large size-large"';
return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );Once you add the code, how do you confirm the featured image is not lazy loading? You can do that by testing again in Lighthouse. Or, Simply inspect the featured image on your browser, there shouldn’t any ‘lazy‘ attribute in the image link. If you still find the lazy attribute, make sure you add the nearest class.
However, if you are serving your visitors, a static version of your website, using Simply Static plugin, this method may not work properly.
Hopefully in the future WordPress may develop a filter to exclude featured image from getting lazy loaded, or it should add the ‘eager’ tag instead of ‘lazy’.