# LCP reflects optimization measures

- **Pattern:** `ab-002037` (`performance-deep-dive.network-waterfall.lcp-optimized`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002037
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002037)

## Why it matters

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.

## Severity rationale

Critical because LCP directly affects Google search rankings, and an LCP over 2.5 seconds is classified as 'Poor' by Core Web Vitals — failing this metric has measurable, ongoing SEO and conversion consequences.

## Remediation

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.

```tsx
// 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.

## Detection

- **ID:** `lcp-optimized`
- **Severity:** `critical`
- **What to look for:** Count all above-the-fold images and hero elements across key pages. Enumerate their loading strategy (eager, lazy, preloaded). Measure Largest Contentful Paint (LCP) in Chrome DevTools → Lighthouse or Web Vitals. Check what element is the LCP (usually a hero image or heading). Verify that this element loads quickly. For images, check that they are optimized (WebP, responsive, lazy-load=false for above-fold).
- **Pass criteria:** LCP is under 2.5 seconds on typical connection (fast 3G). The LCP element loads quickly and is not blocked by unoptimized assets.
- **Fail criteria:** LCP exceeds 2.5 seconds, or is caused by unoptimized images, render-blocking CSS/JS, or slow API calls.
- **Skip (N/A) when:** Never — LCP is a Core Web Vital and critical for user experience.
- **Do NOT pass when:** LCP measurement is taken on localhost or dev server where network latency is zero — measurements must reflect production conditions.

- **Cross-reference:** For request waterfall depth that impacts LCP, see `request-waterfall-optimized`.
- **Detail on fail:** `"LCP is 5.2 seconds — hero image 3.4MB uncompressed JPG, no webp variant, no responsive sizing"` or `"LCP blocked by render-blocking CSS and JavaScript. JS defers but CSS still blocks"`
- **Remediation:** Optimize the LCP element: reduce its size, use WebP, serve responsive sizes, preload it, defer non-critical CSS/JS.

  ```tsx
  // app/page.tsx — preload hero image for fast LCP
  import Image from 'next/image'
  <Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
  ```

## External references

- iso-25010 time-behaviour

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-002037