Don't lazy-load the LCP image

Load the LCP image eagerly, and give priority to that one image only.

From nextjs-pagespeed.

Three ways to load the hero

Press Load page, then drag main-thread work.

loading="lazy"Bad
 
loading="eager"Default
 
fetchpriority="high"Good
 
  • Highest
  • High
  • Medium
  • Low
  • Layout
  • LCP
import Image from "next/image";

<Image src={hero} alt="Harbour at dusk" priority sizes="100vw" />

<img src="/hero.avif" alt="Harbour at dusk" width="1600" height="900"
     fetchpriority="high" decoding="async">

High everywhere means none

Press Load page, then drag Marked high down.

Every image priorityBad
 
Only the hero priorityGood
 
<Image src={hero} alt="" priority sizes="100vw" />
{products.map((p) => (
  <Image key={p.id} src={p.src} alt={p.name} width={320} height={240}
         sizes="(min-width: 768px) 25vw, 50vw" />
))}

Below the fold, lazy is right

Scroll either frame and watch which tiles get requested.

Gallery eagerBad
  
Gallery loading="lazy"Good
  
<img src="/hero.avif" alt="" width="1600" height="900" fetchpriority="high">
<img src="/tile-07.avif" alt="Tile 7" width="320" height="240" loading="lazy">

Why it matters, pros and cons

Why it matters

An eager image starts while HTML streams; a lazy one waits for layout.

Pros

  • The hero request starts with the HTML.
  • The hero beats carousels and scripts.
  • Lazy below the fold saves bandwidth.

Cons

  • The LCP image can differ by breakpoint.
  • A text LCP needs no priority image.
  • Priority cannot fix an oversized file.