Nextjs image preloading
Unanswered
Thrianta posted this in #help-forum
ThriantaOP
I'm getting mixed signals from the Nextjs docs and google lighthouse and have some confusion about image preloading. The nextjs docs state:
When to use preload:
- The image is the Largest Contentful Paint (LCP)
element.
- The image is above the fold, typically the hero image.
This is the case for my hero image, BUT the docs also state:
When not to use it:
When the fetchPriority property is used.
Now when i run my website through google lighthouse i get the optimization recommendation for my LCP image:
fetchpriority=high should be applied
This directly contradicts what is stated in the Nextjs docs. Now i know that lighthouse can be off sometimes and is mainly to give a general indication of performance, but still i would love someone elses input.
When to use preload:
- The image is the Largest Contentful Paint (LCP)
element.
- The image is above the fold, typically the hero image.
This is the case for my hero image, BUT the docs also state:
When not to use it:
When the fetchPriority property is used.
Now when i run my website through google lighthouse i get the optimization recommendation for my LCP image:
fetchpriority=high should be applied
This directly contradicts what is stated in the Nextjs docs. Now i know that lighthouse can be off sometimes and is mainly to give a general indication of performance, but still i would love someone elses input.
9 Replies
@Thrianta I'm getting mixed signals from the Nextjs docs and google lighthouse and have some confusion about image preloading. The nextjs docs state:
*When to use preload:
- The image is the Largest Contentful Paint (LCP)
element.
- The image is above the fold, typically the hero image.*
This is the case for my hero image, BUT the docs also state:
*When not to use it:
When the fetchPriority property is used.*
Now when i run my website through google lighthouse i get the optimization recommendation for my LCP image:
*fetchpriority=high should be applied*
This directly contradicts what is stated in the Nextjs docs. Now i know that lighthouse can be off sometimes and is mainly to give a general indication of performance, but still i would love someone elses input.
I would add fetch priority and preload to the hero image. The docs tell a bit different. I would trust google in in that part
Brown-headed Cowbird
I can doit
@Thrianta solved?
@B33fb0n3 <@311479086117683200> solved?
ThriantaOP
Well, no offense, but you just gave your opinion, which i appreciate, but i would like to know why this is mentioned this way in the docs 🙂
@Thrianta Well, no offense, but you just gave your opinion, which i appreciate, but i would like to know why this is mentioned this way in the docs 🙂
I guess to receive that answer you need to write the persons that: 1. created the commits and MR, 2. reviewed and merged the MR
And the best place for that is github 🙂
And the best place for that is github 🙂
Brown-headed Cowbird
<Image
src={heroImage}
alt="Hero"
width={1200}
height={600}
preload={true} // injects <link rel="preload">
fetchPriority="high" // tells browser to prioritise download
/>
src={heroImage}
alt="Hero"
width={1200}
height={600}
preload={true} // injects <link rel="preload">
fetchPriority="high" // tells browser to prioritise download
/>
Why the docs and Lighthouse differ
Old way: Next.js priority prop used to both preload and set fetch priority.
New way (Next.js 16+): priority is deprecated; preload only handles the <link> tag, and fetchPriority is a separate attribute you must set explicitly.
Lighthouse still suggests fetchpriority="high" because that's the modern browser-native signal—it's correct and you should add it.
When to use this combo
Only for your LCP image (hero, above‑fold).
Do not use on multiple images—it competes for bandwidth.
Extra checks
Ensure the image is a Next.js <Image> component (not a CSS background).
Always provide width and height to avoid CLS.
Make sure loading is not set to "lazy" (default is "eager" for preload).
Old way: Next.js priority prop used to both preload and set fetch priority.
New way (Next.js 16+): priority is deprecated; preload only handles the <link> tag, and fetchPriority is a separate attribute you must set explicitly.
Lighthouse still suggests fetchpriority="high" because that's the modern browser-native signal—it's correct and you should add it.
When to use this combo
Only for your LCP image (hero, above‑fold).
Do not use on multiple images—it competes for bandwidth.
Extra checks
Ensure the image is a Next.js <Image> component (not a CSS background).
Always provide width and height to avoid CLS.
Make sure loading is not set to "lazy" (default is "eager" for preload).
Hope it help you
Lionhead
Hello