In August 2022, Google now suggest adding a fetchpriority=”high” attribute to the main page image in their LCP optimisation guide.
WordPress does not set a fetchpriority on featured images by default. So here’s how to add it yourself.
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.
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 for the featured image*/ function featured_image_fixes($html) { if ( !is_single() ) { return $html; } $remove = 'decoding="async"'; $add = 'fetchpriority="high"'; $html = str_replace($remove, $add, $html); return $html; } add_filter( 'post_thumbnail_html', 'featured_image_fixes' );
This code adds the fetchpriority=”high” attribute to your featured image code to help optimise LCP time.
It also removes the ‘decoding=”async”‘ bit from the HTML code used to display the featured image only.
How to Disable Lazy Loading for the Featured Image Only in WordPress 5.5-6.0
Update February 2023: WordPress started lazy loading all images by default in version 5.5 but now excludes the featured image (possibly since version 6.1).
In case you’re still using an older WordPress version, here’s a code snippet that stops the featured image from being lazy loaded while also setting its fetch priority to high:
/*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 in WordPress version 5.5-6.
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.
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“.
Adding this code snippet is one quick and easy way to set a high fetch priority for the featured image (and disable lazy loading if you’re using WordPress 5.5-6).
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.
you saved my life. I was searching for this exactly. can we preload and use fetch priority high?
Glad this post helped Gowtham. Google’s current advice is to add the fetchpriority=high attribute to your hero image (https://web.dev/optimize-lcp/#optimize-the-priority-the-resource-is-given) and there is more info on priority hints to prioritise loading order with use case examples at https://web.dev/priority-hints/
Great post Janine, and just what I was looking for!
How can we do this for a hero image that isn’t featured? For example when using Gutenberg blocks with a cover or background.
Thanks Jimmy. I haven’t needed to change block output before, but from a quick look into it, you can override the html output for a wordpress block by specifying a render_callback function for the block type as in this demo or by using the render_block filter. I think the first way is only called once which is appealing, whereas the second is called for all blocks, but I haven’t looked at efficiency etc & there may well be better approaches.