mediumPerformance

LCP Image Candidate Not Preloaded

The main LCP image is not preloaded, delaying its rendering and negatively impacting Core Web Vitals.

By Seoxpert Editorial · Published Apr 26, 2026

Why it matters

Largest Contentful Paint (LCP) is a key Core Web Vitals metric and a direct Google ranking factor. If the LCP image is not preloaded, browsers delay fetching it until after parsing HTML, causing slower perceived load times and potentially lower rankings.

Impact

Not preloading the LCP image can significantly slow down page load and harm SEO performance.

How it's detected

An automated crawler checks for <link rel="preload" as="image"> tags referencing the LCP image candidate in the <head> of the HTML.

Common causes

•Omitting preload hints for hero images in the HTML <head>
•Using dynamic image URLs not known at build time
•Not identifying which image is the LCP candidate
•Relying solely on lazy loading for above-the-fold images

How to fix it

Identify the main above-the-fold (LCP) image for each template. Add a <link rel="preload" href="/path/to/image.jpg" as="image" fetchpriority="high"> tag in the <head>. For responsive images, use imagesrcset and imagesizes attributes within the preload tag to match the <img> element.

Code examples

Without preload (problem)

<!-- No preload hint for LCP image -->
<img src="/hero.jpg" alt="Hero image" />

With preload (fix)

<head>
  <link rel="preload" href="/hero.jpg" as="image" fetchpriority="high">
</head>
<body>
  <img src="/hero.jpg" alt="Hero image" />

With responsive preload (fix for srcset)

<head>
  <link rel="preload" as="image" href="/hero-large.jpg" imagesrcset="/hero-small.jpg 600w, /hero-large.jpg 1200w" imagesizes="(max-width: 600px) 600px, 1200px" fetchpriority="high">
</head>
<body>
  <img src="/hero-large.jpg" srcset="/hero-small.jpg 600w, /hero-large.jpg 1200w" sizes="(max-width: 600px) 600px, 1200px" alt="Hero image" />

FAQ

How do I identify which image is the LCP candidate?

Use tools like Lighthouse or Chrome DevTools' Performance panel to see which image is reported as the LCP element.

Can I preload responsive images with srcset?

Yes, use the imagesrcset and imagesizes attributes in the <link rel="preload"> tag to match your <img> element.

Is fetchpriority="high" necessary for LCP images?

Adding fetchpriority="high" signals to the browser that this image is critical, helping prioritize its download.

What happens if I preload the wrong image?

Preloading non-critical images can waste bandwidth and may not improve LCP; always target the actual LCP image.

Found this issue on your site?

Run a scan to see if LCP Image Candidate Not Preloaded affects your pages.

Scan my website →