Core Web Vitals (LCP, INP, CLS)What it checks and how to fix it

What it checks

Grades Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift at the 75th percentile of real Chrome users on phones (Chrome UX Report), for the page or for the whole site when the page has too little traffic. Google's thresholds apply: LCP 2.5 s good and over 4 s poor, INP 200 ms and 500 ms, CLS 0.1 and 0.25; any poor metric fails and any metric needing improvement warns. Without real-user data it falls back to a Lighthouse lab estimate, with Total Blocking Time standing in for INP, which can warn but never fails.

Why it matters

Core Web Vitals measure what visitors actually feel: how fast the main content appears, how quickly the page reacts to a tap, and whether things jump around while it loads. Google uses the same real-user data as a ranking signal, and poor scores go hand in hand with higher bounce rates and lower conversions.

How to fix it

Fix whichever metric is out of range.

LCP (loading): make the largest element, usually a hero image or headline, arrive first. Never lazy-load it, preload it and serve it small.

<img src="/images/hero.webp" alt="Dashboard" width="1200" height="630" fetchpriority="high">

INP (responsiveness): break long JavaScript tasks into chunks, defer or remove third-party scripts, and keep event handlers short.

for (const item of items) {
  process(item);
  await scheduler.yield();
}

CLS (visual stability): give images, videos, ads and embeds reserved space, and do not insert content above what is already on screen.

.embed { aspect-ratio: 16 / 9; }

Real-user data covers the last 28 days, so improvements show up gradually.