Core Web Vitals Explained: LCP, INP and CLS

Three Numbers Google Cares About

Core Web Vitals are Google's attempt to turn "does this website feel good to use" into something measurable. Instead of vague advice about being fast, they define three specific experiences: how quickly the page shows you something useful, how quickly it responds when you interact with it, and how much it jumps around while loading.

These three metrics are confirmed ranking signals. But the ranking bonus is not the main reason to care about them. Sites that pass Core Web Vitals keep visitors longer, convert better, and get abandoned less often - the ranking benefit is a side effect of simply being pleasant to use.

Largest Contentful Paint: How Fast Content Appears

Largest Contentful Paint, or LCP, measures the moment the biggest visible thing on the screen finishes loading. On most pages that is a hero image, a banner, or a large block of headline text. It is a proxy for the question every visitor asks in the first two seconds: is anything actually happening here?

Under 2.5 seconds is good. Between 2.5 and 4 seconds needs improvement. Above 4 seconds is poor, and at that point a meaningful share of visitors will have already left.

What Usually Slows LCP Down

The most common cause is a slow server response - the browser cannot start rendering anything until the first bytes arrive. After that, the usual suspects are oversized hero images, fonts that block text from rendering until they download, and stylesheets or scripts in the page head that delay everything behind them.

The fastest wins here are almost always image-related. Serving your hero image in a modern format, at the size it is actually displayed, and telling the browser to prioritise it, can cut LCP in half on an otherwise unchanged page.

Interaction to Next Paint: How Fast the Page Responds

Interaction to Next Paint, or INP, replaced First Input Delay as Google's responsiveness metric. The older metric only looked at the very first interaction, and only at the delay before the browser started working on it. INP looks at every click, tap and key press across the whole visit, and measures the full round trip - from the moment you interact to the moment the screen visibly updates.

That makes it a much harder test, and a much more honest one. Under 200 milliseconds is good. Between 200 and 500 milliseconds needs improvement. Above 500 milliseconds is poor - and at that point taps genuinely feel broken, prompting visitors to tap again and trigger duplicate actions.

Why INP Fails

Almost always: too much JavaScript doing too much work on the main thread. The browser can only do one thing at a time in that thread, so while a script is busy, your click is simply queued. Heavy third-party tags, oversized frameworks, and expensive work triggered on every keystroke are the usual causes.

The Lab Measurement Catch

INP can only be measured from real visitors, because it needs real interactions to observe. An automated scan loads your page but does not click around it, so no tool can hand you a true INP number from a single test.

What automated tools measure instead is Total Blocking Time - how long the main thread was jammed during load. It is the best available stand-in: pages with high blocking time nearly always have poor INP, and pages with low blocking time nearly always pass. Website Grader measures Total Blocking Time on both desktop and mobile, flagging anything above 200 milliseconds. Treat it as your early warning system for INP.

Cumulative Layout Shift: How Much the Page Jumps

Cumulative Layout Shift, or CLS, measures visual stability. You know the experience: you go to tap a link, an advert loads above it, everything slides down, and you tap something else entirely. CLS puts a number on how often and how severely that happens.

Below 0.1 is good. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor.

The Four Classic Causes

Images and videos without reserved space, so the page reflows the moment they arrive. Adverts, embeds and widgets injected into the flow of the page after load. Web fonts that swap in at a different size than the fallback, pushing text around. And content inserted above what the visitor is already reading - cookie banners and promotional bars are frequent offenders.

All four have the same fix: reserve the space before the content arrives. If the browser knows how big something will be, nothing has to move when it finally loads.

Lab Data and Field Data Disagree - That Is Normal

A lab test loads your page once, from one location, on a simulated connection. Field data comes from real visitors on real devices and real networks, including old phones on patchy mobile connections. Field numbers are usually worse, and they are the ones Google actually uses for ranking.

Lab data is still the right tool for day-to-day work, because it is repeatable and available immediately. Use lab tests to find and fix problems, and treat field data as the score that counts.

How Website Grader Measures Your Vitals

Website Grader runs Google's own Lighthouse engine through the PageSpeed Insights API and reports real measured values for Largest Contentful Paint, Cumulative Layout Shift and Total Blocking Time - on both desktop and mobile profiles, because the two often differ dramatically.

Alongside the vitals, the performance category checks total page weight, the number of external resources, HTML size and whether compression is enabled - the underlying causes behind most poor vitals scores. Performance carries 25% of your overall score, tied with SEO as the heaviest category.

Where to Start

Fix in this order, because that is roughly the order of effort-to-impact. First, reserve space for images, embeds and banners - this is usually a one-afternoon fix that resolves layout shift permanently. Second, optimise the largest image above the fold. Third, audit your third-party scripts and remove or defer everything that is not essential.

Those three passes clear the majority of Core Web Vitals failures on the majority of sites, and none of them require rebuilding anything.

Check Your Core Web Vitals Now

Enter your URL below for a free scan with real Lighthouse measurements on desktop and mobile. The full report explains every failing metric and gives you the specific change to make.