WordPress Featured Image: Set Fetchpriority & Disable Lazy Loading (without a Plugin)

Disable Lazy Loading for the Featured Image Only

WordPress started lazy loading all images by default since version 5.5. While lazy loading images is usually a good thing, if you lazy load large images near the top of your page (above the fold), you can increase the LCP (largest contentful paint) time.

This can make your Google PageSpeed score worse and you may see the warning “largest contentful paint image was lazily loaded“.

You can fix this by excluding the featured image in your blog post from lazy loading. You don’t need to install any plugins to do this. You just need to add the small bit of code below which should work with any WordPress theme.

Set Fetchpriority to high for the Featured Image

In August 2022, Google now suggest adding a fetchpriority=”high” attribute to the main page image in their LCP optimisation guide.

So I’ve updated the code snippet below to set a high fetch priority and disable lazy loading at the same time.

WordPress Code Snippet

Just add the following PHP code snippet to your theme’s functions.php file (or via a plugin like Code Snippets if you use that instead of editing your WordPress theme files).

/*Set high fetch priority and disable lazy loading for featured image only*/
function featured_image_fixes($html) {
    if ( !is_single() ) {
        return $html;
    }
    $remove = 'loading="lazy"';
    $add = 'fetchpriority="high"';
    $html = str_replace($remove, $add, $html);
    return $html;
}
add_filter( 'post_thumbnail_html', 'featured_image_fixes' );

This code removes the ‘loading=”lazy”‘ bit from the HTML code used to display the featured image in your blog post.

It also adds the fetchpriority=”high” attribute to your featured image code to further optimise LCP time.

It only excludes the featured image on your single blog post page from lazy loading. All other images in your post & post thumbnails on list pages will still be lazy loaded.

This code snippet is one quick and easy way to set the fetch priority and disable lazy loading for the large featured image near the top of the page.

If you’re already using an image optimisation or cache plugin, there may be options to customise lazy loading & set fetch priority hints there instead.

Leave a Comment