# Key pages meet Core Web Vitals thresholds

- **Pattern:** `ab-002482` (`seo-advanced.technical-seo.core-web-vitals`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002482
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002482)

## Why it matters

Google uses Core Web Vitals — LCP, INP, and CLS — as direct page-experience ranking signals, confirmed in the 2023 Google Search documentation. Pages with LCP above 2.5s or CLS above 0.1 are algorithmically penalized in ranking relative to pages that meet thresholds. Beyond ranking, INP above 200ms produces measurably degraded user interaction feedback, which correlates with higher bounce rates. These metrics are tracked in Google Search Console under Core Web Vitals report, making poor performance visible to any competitor who looks. iso-25010:2011 performance-efficiency.time-behaviour maps directly to these thresholds.

## Severity rationale

Critical because Core Web Vitals are confirmed Google ranking factors — failing thresholds produces direct, algorithmic SERP ranking loss across all affected pages.

## Remediation

Measure with Lighthouse (`npx lighthouse https://yoursite.com --output json`) or PageSpeed Insights. Address the three thresholds in order of impact:

- **LCP (target ≤2.5s):** Add `priority` prop to the above-the-fold `next/image` in `app/page.tsx`. Preload hero images with `<link rel="preload">` in `app/layout.tsx`.
- **CLS (target ≤0.1):** Add explicit `width` and `height` to every `<Image>` component. Reserve space for ad slots and async-loaded content with CSS `min-height`.
- **INP (target ≤200ms):** Defer non-critical third-party scripts with `next/script strategy="lazyOnload"`. Break long tasks with `scheduler.yield()` in interactive handlers.

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

Re-run Lighthouse after each change to confirm threshold movement before deploying.

## Detection

- **ID:** `core-web-vitals`
- **Severity:** `critical`
- **What to look for:** Enumerate at least 3 key page types for testing: home page, a product/service page, and a blog post (if exists). For each page, measure or estimate these 3 Core Web Vitals metrics: LCP (Largest Contentful Paint, threshold no more than 2.5s), INP (Interaction to Next Paint, threshold no more than 200ms), CLS (Cumulative Layout Shift, threshold no more than 0.1). Count how many pages pass all 3 thresholds.
- **Pass criteria:** At least 90% of sampled pages meet all 3 Core Web Vitals thresholds: LCP no more than 2.5s, INP no more than 200ms, CLS no more than 0.1. Report even on pass: "X of Y sampled pages pass all Core Web Vitals — LCP: Zs, INP: Wms, CLS: V."
- **Fail criteria:** More than 10% of sampled pages fail at least 1 Core Web Vitals threshold.
- **Skip (N/A) when:** Unable to run Lighthouse or measure performance metrics (e.g., dev environment only, no staging URL, CLI tool without browser access).
- **Cross-reference:** For deeper performance analysis including bundle size and load waterfall, the Performance Deep Dive audit covers these in detail.
- **Detail on fail:** `"1 of 3 sampled pages fails — home page LCP 3.2s (exceeds 2.5s threshold); blog posts meet targets"`.
- **Remediation:** Core Web Vitals are ranking factors. Optimize in your page components:
  - **LCP:** Use `priority` prop on `next/image` for above-the-fold images in `app/page.tsx`, optimize font loading, cache static assets
  - **INP:** Break up long JavaScript tasks, defer non-critical code with `dynamic(() => import(...), { ssr: false })`
  - **CLS:** Reserve space for images/ads with explicit `width`/`height`, avoid inserting content above existing content

## External references

- iso-25010 performance-efficiency.time-behaviour

Taxons: performance, findability

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