perf/lcp-image-priority

Dlaczego

The hero image is usually the largest thing in the first view, so its load time is the page's Largest Contentful Paint. loading="lazy" makes the browser wait until layout to know whether the image is in view, which adds a delay to exactly the request that matters most. Marking it fetchpriority="high" and lazy at once cancels the hint.

Poprawka

Remove loading="lazy" from the hero and the first images in view, and give the one LCP image fetchpriority="high" (Next.js 16: <Image fetchPriority="high"> or loading="eager", since next/image is lazy by default and priority is deprecated in favour of preload; Angular <img ngSrc priority>, Nuxt <NuxtImg :preload="{ fetchPriority: 'high' }">). Keep loading="lazy" for images further down. Confirm which element is the LCP with audit --url or the DevTools Performance panel.

Przykłady

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

Źródła

• web.dev, Optimize Largest Contentful Paint
• web.dev, Optimize resource loading with the Fetch Priority API
• web.dev, Browser-level image lazy loading
• Chrome for Developers, LCP request discovery insight
• Next.js, Image component (preload, fetchPriority, loading)

Przeczytaj w terminalu

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