---
title: "Fix Resource Load Delay for Better LCP"
description: "How to reduce resource load delay by preloading LCP resources and prioritizing critical assets."
canonical_url: "https://unlighthouse.dev/learn-lighthouse/lcp/resource-load-delay"
last_updated: "2025-01-12"
---
The median site with poor LCP [spends 1.3 seconds on resource load delay](https://web.dev/blog/common-misconceptions-lcp) - 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.
```html
```
For responsive images:
```html
```
### 2. use fetchpriority="high"
Tell the browser this resource is critical.
```html
```
The `fetchpriority` attribute has grown from [0.03% adoption in 2022 to 15% in 2024](https://almanac.httparchive.org/en/2024/performance).
### 3. include LCP resource in HTML
If your LCP image URL is set by JavaScript or CSS, move it to HTML.
```html
```
```jsx
// Before: image URL from JavaScript (discovered late)
function Hero() {
const [heroImage, setHeroImage] = useState(null)
useEffect(() => {
setHeroImage('/hero.webp')
}, [])
return heroImage ? : null
}
// After: image in initial render
const HeroNew = () =>
```
### 4. avoid lazy-loading LCP
Never use `loading="lazy"` on your LCP image.
```html
```
About [10% of LCP images are incorrectly lazy-loaded](https://almanac.httparchive.org/en/2024/performance).
### 5. reduce request chains
If your LCP resource depends on other resources loading first, eliminate the chain.
```html
```
## Framework-specific solutions
**Next.js**
Use `priority` prop on `next/image`:
```jsx
import Image from 'next/image'
export function HeroImage() {
return (
)
}
```
**Nuxt**
Use `preload` prop on `NuxtImg`:
```html
```
Or use `useHead` for manual preload:
```ts
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:
- [Large Images](/learn-lighthouse/lcp/large-images) - Preloading a 2MB image doesn't help much
- [Lazy-Loading Above Fold](/learn-lighthouse/lcp/lazy-loading-above-fold) - Related anti-pattern
## Test your entire site
Resource load delay varies by page. [Unlighthouse](/) scans your entire site and identifies pages where the browser discovers LCP resources late.
```
The `fetchpriority` attribute has grown from [0.03% adoption in 2022 to 15% in 2024](https://almanac.httparchive.org/en/2024/performance).
### 3. include LCP resource in HTML
If your LCP image URL is set by JavaScript or CSS, move it to HTML.
```html
```
```jsx
// Before: image URL from JavaScript (discovered late)
function Hero() {
const [heroImage, setHeroImage] = useState(null)
useEffect(() => {
setHeroImage('/hero.webp')
}, [])
return heroImage ? 
```
### 4. avoid lazy-loading LCP
Never use `loading="lazy"` on your LCP image.
```html