LCP image prioritization (fetchpriority)

Browsers guess, and the guess is a heuristic, not a fixed rule. What an image gets depends on when the parser discovered it, where it sits in the markup, and whether layout suggests it is on screen. Chrome starts most images low and promotes the first few that layout proves are in the viewport, which can land several hundred milliseconds after your hero was already queued behind fonts, analytics, and six thumbnails. fetchpriority='high' on that one image skips the guessing and moves it to the front, which is usually the cheapest LCP win available.

The full recipe for the hero: fetchpriority='high', no loading='lazy', no JavaScript required to render it, and real width and height so the box is reserved. If the LCP element is a CSS background image the browser cannot see it until the stylesheet parses, so add a link rel='preload' with fetchpriority='high' in the head, or better, make it a real img tag. Frameworks wrap this: Next.js has a priority prop on Image, which in current versions emits high fetch priority and skips lazy loading. That is a framework behavior tied to your version, not a browser rule, so check what your build actually emits in the rendered HTML.

Marking everything high is the same as marking nothing high: priority is a ranking, not a speed setting. One hero image per page, and consider dropping the rest to fetchpriority='low' (below-the-fold carousel frames, avatars) so the important one gets clear road. Verify in devtools which element the browser actually picked as LCP before optimizing the wrong one.