LCP reflects optimization measures

LCP is a Core Web Vital that Google uses in its ranking algorithm. An LCP over 2.5 seconds triggers the "Poor" label in PageSpeed Insights and directly reduces organic search visibility. Beyond SEO, a slow LCP means users wait over 2.5 seconds before seeing the primary content of the page — a threshold above which mobile abandonment rates climb sharply. ISO 25010:2011 time-behaviour captures the metric; the business impact spans SEO rankings, ad quality scores, and first impressions.

Identify the LCP element using Chrome DevTools → Lighthouse. For hero images, add the priority prop to next/image (which generates a <link rel=preload> tag) and ensure the image is served in WebP at the correct display size.

// app/page.tsx — preload the LCP hero image
import Image from 'next/image'

export default function HomePage() {
  return (
    <Image
      src="/hero.webp"
      alt="Product hero"
      width={1200}
      height={600}
      priority  // sets fetchpriority=high and preloads
    />
  )
}

If the LCP element is text, ensure render-blocking CSS is inlined or preloaded so the font renders without a FOIT delay.