perf/lcp-image

Why

LCP is the moment the largest image or text block appears; "good" is 2.5 s or less at the 75th percentile. When the image URL is only known after JavaScript runs or CSS loads, or the request waits behind others, the browser discovers it late and the delay shows up directly in LCP.

Fix

Put the hero <img src srcset sizes> in the server HTML. Give it fetchpriority="high" and no loading="lazy". If it must be a CSS background, add <link rel="preload" as="image" href="…" fetchpriority="high"> (with imagesrcset and imagesizes for responsive images). In client-rendered apps, render the hero on the server or prerender the route.

Examples

<!-- good -->
<img src="hero-1200.avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw"
     width="1600" height="900" alt="…" fetchpriority="high">

Sources

• Chrome for Developers, LCP request discovery insight
• web.dev, Optimize Largest Contentful Paint
• web.dev, Optimize resource loading with the Fetch Priority API

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/lcp-image