Preload the Featured Image on Single Posts
Tells the browser to fetch the featured image of the current post or page right away, which improves Largest Contentful Paint when it is shown at the top.
Opens WPIDE on
Code
// The image size your theme shows at the top of single posts.
$wpide_preload_image_size = 'large';
add_filter( 'wp_preload_resources', function ( $resources ) use ( $wpide_preload_image_size ) {
if ( ! is_singular() || ! has_post_thumbnail() ) {
return $resources;
}
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, $wpide_preload_image_size );
if ( ! $image ) {
return $resources;
}
$resource = array(
'href' => $image[0],
'as' => 'image',
'fetchpriority' => 'high',
);
$srcset = wp_get_attachment_image_srcset( $image_id, $wpide_preload_image_size );
if ( $srcset ) {
$resource['imagesrcset'] = $srcset;
$resource['imagesizes'] = (string) wp_get_attachment_image_sizes( $image_id, $wpide_preload_image_size );
}
$resources[] = $resource;
return $resources;
} );Notes
Skip this if your theme shows the featured image lower on the page; preloading an image that is not above the fold wastes bandwidth.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.