Why it matters
loading="lazy" tells the browser to wait for layout before fetching, which delays the most important image on the page by hundreds of milliseconds.
How to fix it
Remove loading="lazy" from the LCP image (in Next: preload or loading="eager" + fetchPriority="high"). Lazy-load only images below the fold.
Example
<!-- before --> <img src="/hero.avif" loading="lazy">
<!-- after --> <img src="/hero.avif" fetchpriority="high" width="1200" height="630" alt="…">References
More performance rules
void perf reports 25 rules in this category. Core Web Vitals and bytes: LCP, CLS, TBT, TTFB, JavaScript, CSS, fonts, images, caching and compression, measured as the median of several runs on a throttled mobile and a desktop profile.
font-budgetWeb font transfer exceeds the budgettoo-many-fontsToo many font files are downloadedimage-budgetImage transfer exceeds the budgettoo-many-requestsPage makes many requestslcp-image-no-priorityLCP image has no fetchpriority="high"lcp-background-imageLCP element is a CSS background imageimage-oversizedImage is much larger than its rendered sizeimage-legacy-formatImage served in a legacy format