perf/lcp-image-not-lazy

Dlaczego

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.

Poprawka

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>.

Przykłady

<!-- 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">

Źródła

• 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

Przeczytaj w terminalu

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