Core Web Vitals Explained: LCP, INP, and CLS

What are Core Web Vitals?

Core Web Vitals are the subset of Google's Web Vitals program that every site is expected to meet. Each one captures a different part of how a page feels: how quickly the main content appears, how promptly the page reacts when you interact with it, and whether things stay put instead of jumping around while it loads.

They are measured in the field — from real Chrome users, aggregated in the Chrome UX Report — not from a single lab test. That distinction matters: your site can look fast on your laptop and still fail in the field, where people are on mid-range phones and patchy networks.

What are the three metrics and their thresholds?

Each vital has three bands — good, needs improvement, and poor — evaluated at the 75th percentile of page loads, with mobile and desktop scored separately.

Metric	Measures	Good	Needs improvement	Poor
LCP	Loading — when the biggest element paints	≤ 2.5 s	2.5–4.0 s	> 4.0 s
INP	Responsiveness — interaction to next paint	≤ 200 ms	200–500 ms	> 500 ms
CLS	Visual stability — unexpected layout shift	≤ 0.1	0.1–0.25	> 0.25

The 75th-percentile rule is the part people miss. You are not fast if your median visit is fast; you are fast when three out of four visits clear the bar. That is deliberately demanding, because the slowest quarter of your traffic is where frustration and bounces concentrate.

Which Core Web Vital should you fix first?

Fix the one your page actually fails in the field — and if it fails more than one, start with the metric whose symptom your users would notice most. This quick diagnostic maps the feeling to the metric and the first move:

Symptom	Likely vital	First move
Hero image or headline takes ages to show	LCP	Speed up server response and prioritize the LCP image
Buttons and menus feel laggy after a tap	INP	Break up long JavaScript tasks; ship less script
Content jumps as the page loads	CLS	Set width/height on media; reserve space for ads and embeds

Chasing all three at once wastes effort. Pull your field data first (see below), find the failing metric, and spend your time there. Our companion guides go deep on each: improving Largest Contentful Paint, fixing Cumulative Layout Shift, and the vital that replaced FID, INP.

Where do you measure Core Web Vitals?

Use field data to judge and lab data to debug. Field tools show what real users experience — PageSpeed Insights, the Core Web Vitals report in Google Search Console, and the Chrome UX Report. Lab tools — Lighthouse, the Chrome DevTools Performance panel, and the web-vitals JavaScript library — let you reproduce a problem and profile it on your own machine.

The common mistake is trusting only the lab. A lab run uses one device on one network at one moment; the field aggregates weeks of real, varied visits. Always confirm a fix against field data before you call it done — the lab tells you why, the field tells you whether it mattered.

Do Core Web Vitals affect SEO?

They help, within limits. Core Web Vitals feed Google's page-experience signals, which behave as a tiebreaker among results of similar relevance — not a lever that lifts weak content over strong content. You will not outrank a better page by trimming a few hundred milliseconds.

What good vitals reliably do is protect the visitors you already earn. Fast, stable pages bounce less and quietly signal that a site is well built — which is a credibility point as much as a performance one. See what makes a website feel trustworthy for why "it works, and it's fast" reads as a trust signal in its own right.

How this site keeps its vitals green

A worked example beats theory, so here is how this blog is built. The article body's largest element is the intro paragraph — text, not an image — so the fonts are tuned to render early and the cover image is loaded with an explicit priority and fixed dimensions, which keeps LCP low without a late image swap. Every ad slot reserves a fixed height before anything loads, so nothing below it ever moves — layout shift stays at zero in our Lighthouse testing. And the interface ships little blocking JavaScript, which keeps interactions snappy. None of that is exotic; it is just the same three techniques applied on purpose. For more, browse the Web Development tag or the Technology section.