LCP element identified and optimized for fast delivery

ISO-25010 time-behaviour is measured by LCP — and Google's Core Web Vitals set the bar at 2.5 seconds. Miss it and you lose search ranking (LCP is a page experience signal), conversion rate (every 100ms of delay costs approximately 1% in revenue for e-commerce), and mobile users on slower connections who bounce before the page is usable. An unoptimized LCP element is typically the hero image or largest heading; when it loads without a preload directive or is lazy-loaded by mistake, the browser discovers it late in the waterfall, adding hundreds of milliseconds before the page looks complete.

Add a <link rel="preload"> in <head> for the LCP element — the browser will fetch it at the highest priority before parsing the rest of the document. For Next.js, pass the priority prop to next/image instead:

// src/app/page.tsx — hero image above the fold
<Image src="/images/hero.jpg" alt="Hero" priority width={1200} height={600} />

For plain HTML, include imagesrcset and imagesizes so responsive variants are preloaded at the right size:

<link rel="preload" as="image" href="/images/hero.jpg"
      imagesrcset="/images/hero-480.jpg 480w, /images/hero-1200.jpg 1200w"
      imagesizes="(max-width: 768px) 100vw, 1200px">

Verify impact in DevTools: the LCP resource must appear at the very start of the waterfall with priority "Highest".