Preload Largest Contentful Paint image

What is Preloading?

Preloading tells the browser to download something early, before the main rendering kicks in. The file is ready sooner and does not block the page's render. In LCP timing terms, preloading reduces the Resource Load Delay: the gap between the browser receiving the HTML and starting to download the LCP image.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Why should I preload the largest contentful paint image?

Images that are visible and in the viewport will have a high priority and will be downloaded relatively early in the whole page-loading process. Browsers like Chrome will do its best to prioritize those images for you and will often do a good job. Still, browsers will make an educated guess at the download order and will often prioritize other resources like remote JavaScript or other visible images over the LCP image.

Because of this behavior the LCP image download will not start as early as you might like. Preloading the Largest Contentful Paint image will overcome this issue.

The numbers back this up. According to the 2025 Web Almanac, 76% of mobile pages have an image as their LCP element. Yet only 2.1% of pages actually preload that image. That is a massive missed opportunity. On top of that, many LCP images are not discoverable in the initial HTML because they rely on JavaScript or CSS to render. The browser cannot download what it cannot find. A preload tag solves that.

How does preloading Largest Contentful Paint image affect page performance?

Preloading the LCP image makes it available for rendering sooner. The result: a better LCP score in both Lighthouse and field data.

Across sites monitored by CoreDash, 98% of page loads with a preloaded LCP image score 'good', compared to 88% without preloading. The p75 LCP for preloaded images is roughly 2x faster than for non-preloaded ones.

Preloading matters even more when the LCP image is not the first image the browser downloads. This happens when:

• There are multiple images in the visible viewport
• The LCP image is a background image (background images are usually downloaded later than foreground images)
• The LCP element relies on JavaScript. For example with a slider script or if your site is built upon a JavaScript framework like React.

Still, 17% of mobile sites lazy-load their LCP image according to the 2025 Web Almanac. Only 62% of mobile origins pass LCP. These two facts are not unrelated. If you are lazy-loading your LCP image, fix that first, then preload it.

Use fetchpriority="high" on the LCP image

Besides preloading, you should also add fetchpriority="high" to the LCP image element itself. This tells the browser to prioritize this image over other resources. A test on Google Flights showed LCP improvements from 2.6 seconds to 1.9 seconds just by adding this attribute.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

A preloaded image still gets default priority unless you explicitly boost it. Combining rel="preload" with fetchpriority="high" on both the link tag and the img element gives the browser the clearest possible signal. For more on how browsers decide what to download first, see the complete guide to resource prioritization.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

Adoption of fetchpriority="high" grew from 0.03% of mobile sites in 2022 to 17.3% in 2025, largely thanks to WordPress adding it to core. If your CMS does not set it automatically, add it yourself.

How to preload the Largest Contentful Paint Image

Preloading the LCP image is easy. There are just 3 steps to take:

1. Determine the LCP element: Run a lighthouse audit and check the largest Contentful Paint Element. Make sure the LCP element is indeed an image!
2. Check for responsive image formats. If you are using responsive images you need to add all those image sizes to the srcset of the preload tag. Otherwise we will preload the wrong image. That will only slow down the page.
3. Add the preload tag. All that is left to do is to add the preload tag.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

The imagesizes value should match the sizes attribute on your <img> element. If your image displays at half the viewport width, use imagesizes="50vw". Getting this wrong means the browser preloads the wrong image variant.

Only preload the LCP image. If you preload too many resources, you dilute the priority boost and the browser cannot distinguish what matters most. One preload for the LCP image is all you need. For an even more aggressive approach, you can combine preloading with 103 Early Hints to start the download before the HTML even arrives.

Preloading gets the image downloading sooner, but the image itself still needs to be optimized. Serve it in a modern format like WebP or AVIF and at the right dimensions. See optimize images for Core Web Vitals for the full rundown.

Preloading only helps with one part of the LCP timing: the delay before the image starts downloading. If your Time to First Byte is slow, no amount of preloading will compensate. The preload tag lives in the HTML, so the browser has to receive the HTML first. Check your TTFB before adding preload hints.

How to preload the Largest Contentful Paint Image in WordPress

Preloading the Largest Contentful Paint image in WordPress is not hard at all. Usually the largest Contentful Paint Image is the Featured image for a blog post or page. With just a few lines of code we can grab the featured image url and srcset and add that to the head of the page.

Just add this code directly after the title element in the header.php file of your current template.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>