Above-fold content is explicitly prioritized for loading

Loading the hero image lazily — whether by setting loading="lazy" directly or by omitting an explicit priority signal — instructs the browser to deprioritise it until the image enters the viewport. Since the hero is almost always already in the viewport, this creates a paradox: the element that determines LCP is the last one the browser fetches. The result is typically a 1–2s LCP penalty on mobile, which is the difference between 'good' and 'poor' in Google's Core Web Vitals classification system. ISO-25010 time-behaviour defines response time as a critical quality attribute for user-facing interfaces; the above-fold content is exactly where time-behaviour matters most. Google Search Console tracks this at a per-URL level and uses it as a Page Experience ranking input.

Never apply loading="lazy" to the hero image. Use the Next.js priority prop or fetchpriority="high" on plain <img> tags to signal the browser to fetch it immediately.

// WRONG — never lazy-load the LCP element
<Image src="/hero.webp" alt="Hero" loading="lazy" />

// CORRECT — Next.js adds fetchpriority=high and <link rel="preload">
<Image
  src="/hero.webp"
  alt="Hero"
  width={1200}
  height={630}
  priority
/>

// For plain img tags
<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  decoding="async"
/>

Add a manual preload hint in your root layout <head> as a belt-and-suspenders signal:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />