Fix Resource Load Delay for Better LCP

How to reduce resource load delay by preloading LCP resources and prioritizing critical assets.
Harlan WiltonHarlan Wilton5 min read Published

The median site with poor LCP spends 1.3 seconds on resource load delay—time wasted before even starting to download the LCP image.

What's the Problem?

Resource load delay is the time between when the browser receives the HTML and when it starts downloading the LCP resource. This happens when:

  • The LCP image URL isn't in the initial HTML (e.g., set by JavaScript or CSS)
  • Other resources are queued ahead of the LCP resource
  • The browser doesn't know the image is important

Why it hurts LCP: Every millisecond spent waiting to start downloading is a millisecond added to LCP.

How to Identify This Issue

Chrome DevTools

  1. Performance tab → record → reload
  2. Find your LCP image in the Network section
  3. Look at when the request starts vs. when HTML arrived
  4. Large gap = resource load delay

WebPageTest

Look at the waterfall chart. If the LCP image request starts late (far to the right), you have resource load delay.

The Fix

1. Preload the LCP Image

Tell the browser to start downloading the LCP image immediately.

<head>
  <!-- Preload LCP image -->
  <link
    rel="preload"
    href="/images/hero.webp"
    as="image"
    fetchpriority="high"
  >
</head>

For responsive images:

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

2. Use fetchpriority="high"

Tell the browser this resource is critical.

<img
  src="/images/hero.webp"
  fetchpriority="high"
  alt="Hero image"
>

The fetchpriority attribute has grown from 0.03% adoption in 2022 to 15% in 2024.

3. Include LCP Resource in HTML

If your LCP image URL is set by JavaScript or CSS, move it to HTML.

<!-- Before: image URL in CSS (discovered late) -->
<div class="hero" style="background-image: url(hero.webp)"></div>

<!-- After: image in HTML (discovered immediately) -->
<img src="hero.webp" class="hero" alt="Hero">

// Before: image URL from JavaScript (discovered late)
useEffect(() => {
  setHeroImage('/hero.webp')
}, [])

// After: image in initial render
<img src="/hero.webp" alt="Hero" />

4. Avoid Lazy-Loading LCP

Never use loading="lazy" on your LCP image.

<!-- Wrong: lazy-loading LCP image -->
<img src="hero.webp" loading="lazy" alt="Hero">

<!-- Correct: eager loading (default) with high priority -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="Hero">

About 10% of LCP images are incorrectly lazy-loaded.

5. Reduce Request Chains

If your LCP resource depends on other resources loading first, eliminate the chain.

<!-- Before: chain of dependencies -->
<!-- HTML → CSS → background-image URL → image download -->

<!-- After: direct preload -->
<link rel="preload" href="hero.webp" as="image" fetchpriority="high">

Framework-Specific Solutions

Next.jsUse priority prop on next/image:
import Image from 'next/image'

<Image
  src="/hero.jpg"
  priority // Adds preload + fetchpriority
  alt="Hero"
/>
NuxtUse preload prop on NuxtImg:
<NuxtImg
  src="/hero.jpg"
  preload
  alt="Hero"
/>
Or use useHead for manual preload:
useHead({
  link: [{ rel: 'preload', href: '/hero.webp', as: 'image', fetchpriority: 'high' }]
})

Verify the Fix

After implementing:

  1. Check Network tab — LCP image should start downloading earlier
  2. Run Lighthouse — look for preload suggestions
  3. Compare LCP scores before/after

Expected improvement: Eliminating 1.3 seconds of resource load delay can improve LCP by 1.3 seconds.

Common Mistakes

  • Preloading too many resources — Only preload the most critical 2-3 resources. Too many preloads compete for bandwidth.
  • Wrong preload attributes — Incorrect as attribute or missing crossorigin for fonts causes double downloads.
  • Preloading dynamic URLs — If the image URL changes per page, use server-side rendering to set the correct preload.

Related Issues

Often appears alongside:

Test Your Entire Site

Resource load delay varies by page. Unlighthouse scans your entire site and identifies pages where LCP resources are discovered late.

Related

Prioritize LCP Image

How to prioritize your LCP image with fetchpriority and preload to eliminate resource load delay and improve Core Web Vitals.

Client-Side Rendering

How to improve LCP by using server-side rendering or pre-rendering instead of client-side rendering.