perf/lcp-image-not-lazy

Why

A lazy image is requested only after layout shows it is in the viewport, so the largest image on screen starts downloading late and LCP rises by hundreds of milliseconds, often past the 2.5 s "good" line. Copying loading="lazy" onto every image is the usual cause.

Fix

Remove loading="lazy" from the hero or first large image and add fetchpriority="high" (one or two images per page at most). Keep loading="lazy" for images further down. In frameworks: Next.js <Image preload> or fetchPriority="high" (priority is deprecated in Next.js 16), Angular ngSrc with priority, Nuxt <NuxtImg preload>.

Examples

<!-- bad -->
<img class="hero" src="hero.avif" alt="…" width="1600" height="900" loading="lazy">
<!-- good -->
<img class="hero" src="hero.avif" alt="…" width="1600" height="900" fetchpriority="high">

Sources

• web.dev, Optimize Largest Contentful Paint
• web.dev, Browser-level image lazy loading (avoid lazy loading images in the first visible viewport)
• Chrome for Developers, LCP request discovery insight

Read it in the terminal

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