Preloading Hero Images for Better LCP

Preloading Hero Images

The hero image is often the Largest Contentful Paint (LCP) element on a page. Since LCP is a Core Web Vital that directly affects search rankings, optimizing hero image loading is critical for SEO and user experience.

Why Hero Images Load Slowly

Without preloading, the browser discovers the hero image late:

1. Download HTML
2. Parse HTML, discover CSS <link>
3. Download and parse CSS
4. Build render tree
5. Discover background-image in CSS (or <img> tag lower in DOM)
6. Start downloading image — often 1-3 seconds after navigation

Basic Hero Image Preload

<link rel="preload" href="/images/hero.webp" as="image"
      fetchpriority="high" />

fetchpriority="high" is crucial here — it tells the browser this image is more important than other images discovered at the same time.

Responsive Hero Image Preload

For responsive designs, you need different images for different screen sizes:

<link rel="preload" href="/images/hero-mobile.webp" as="image"
      media="(max-width: 768px)" fetchpriority="high" />
<link rel="preload" href="/images/hero-desktop.webp" as="image"
      media="(min-width: 769px)" fetchpriority="high" />

The media attribute ensures only the appropriate image is preloaded for the user's viewport, saving bandwidth on mobile devices.

Preloading with imagesrcset

For modern browsers, you can use imagesrcset and imagesizes:

<link rel="preload" as="image"
      imagesrcset="/images/hero-400.webp 400w,
                   /images/hero-800.webp 800w,
                   /images/hero-1200.webp 1200w"
      imagesizes="100vw"
      fetchpriority="high" />

Impact on LCP

Preloading the hero image typically improves LCP by 200-500ms on fast connections and up to 1-2 seconds on slow connections. Combined with fetchpriority="high", it ensures the LCP element is prioritized over other images.

Things to Avoid

• Do not preload hero images that are already above the fold in an <img> tag near the top of the HTML — the browser discovers these early enough
• Do not preload multiple image formats (WebP and JPEG) — preload only the format the browser will use
• Do not forget the as="image" attribute — without it, the browser cannot match the preloaded resource