SEO Fundamentals

Core Web Vitals Explained: LCP, INP and CLS

Core Web Vitals in plain English: what LCP, INP and CLS really measure, Google's published thresholds, and the fixes you can make without a developer.

S SparkCliks 0 22 min read
Share
Core Web Vitals Explained: LCP, INP and CLS

Somebody handed you a Core Web Vitals report with red bars on it and asked what you plan to do about it. This guide puts the three metrics into ordinary language, gives you Google's published thresholds, and separates the fixes you can make yourself from the ones that genuinely need a developer. It also explains why your two speed reports disagree, which is where most of the wasted time goes.

What Core Web Vitals Actually Measure

Core Web Vitals are three measurements of what a page feels like to use. Not how well built it is, not how much code it ships. How it feels.

Strip the acronyms away and each one is a complaint a real person might say out loud:

  • LCP answers "how long did I stare at a half built page before the main thing appeared?"
  • INP answers "I tapped that button, how long until anything happened?"
  • CLS answers "why did the page move while I was reading and make me tap the wrong thing?"

Two facts about how the numbers are produced matter more than any single fix.

First, every Core Web Vital is reported at the 75th percentile, not the average. Sort every page load from fastest to slowest and read the value three quarters of the way along. This is why averages mislead: you can have a healthy median and still fail, because the failure lives in the tail. Improving the typical visit does not move the number that gets reported.

Second, the numbers that count come from real visits, collected from Chrome users who have opted into usage statistics reporting and aggregated over a rolling 28 day window in the Chrome User Experience Report (CrUX). They are not produced by running a test on your laptop. Section 6 is entirely about that distinction, because it causes more confusion than the metrics themselves.

Each metric is reported separately for mobile and desktop. Sites routinely pass on desktop and fail on mobile, because mobile field data reflects slower devices and worse networks than the machine you are reading this on.

The Thresholds in One Table

These are Google's published thresholds. They have been stable for LCP and CLS since those metrics launched, and were set for INP when it became a Core Web Vital in March 2024. All three are evaluated at the 75th percentile of page loads, split by mobile and desktop.

MetricWhat it measuresGoodNeeds improvementPoor
LCP (Largest Contentful Paint)Loading: when the biggest visible element finishes rendering2.5 seconds or lessOver 2.5 up to 4.0 secondsOver 4.0 seconds
INP (Interaction to Next Paint)Responsiveness: how long the page takes to visibly react to a tap, click or key press200 milliseconds or lessOver 200 up to 500 millisecondsOver 500 milliseconds
CLS (Cumulative Layout Shift)Visual stability: how much content moves unexpectedly0.1 or lessOver 0.1 up to 0.25Over 0.25

A note on that middle column, because it trips people up. "Needs improvement" is not a soft pass. To be assessed as good overall, a URL group has to land in the good band on all three metrics. Two greens and one amber is a fail.

CLS is the odd one out because it has no unit. It is a score, not a time. A CLS of 0.1 roughly means visible content moved by an amount equal to a tenth of the screen, weighted by how much of the screen was affected. Do not try to convert it into pixels or seconds.

Free trial

Stuck on page two?

Real human clicks that lift your CTR and move you up the rankings.

LCP: When the Main Thing Shows Up

In human terms: you tapped a search result. LCP is the moment the page stops looking like it is still arriving and the main image or headline is actually there.

Technically, LCP records when the largest text block or image inside the visible area finishes rendering. On an article that is the hero image or the headline. On a product page it is usually the product photo. Google splits LCP into four consecutive parts, and knowing which part is fat tells you who has to fix it.

Sub-partPlain meaningUsually owned by
Time to first byteHow long the server took to start answering at allHosting, backend
Resource load delayThe gap before the browser even begins fetching the LCP imageDeveloper
Resource load durationHow long the image itself took to downloadWhoever uploaded the image, plus the CDN
Element render delayEverything downloaded, but the browser was too busy to paint itDeveloper

What commonly causes a bad LCP

  • A slow server response. If time to first byte is already 1.5 seconds, most of the budget is gone before the browser has done anything.
  • Enormous hero images. A 4 MB photograph straight off a camera, uploaded through a CMS editor, is the most common cause on marketing sites, and it is not a developer's fault.
  • The hero image marked as lazy loaded. Lazy loading is for images below the fold. Applied to the LCP element, it delays exactly the thing being measured.
  • Render blocking CSS and JavaScript in the head, which stops the browser painting anything at all.
  • A hero carousel whose first slide only appears once a script has loaded.
  • Web fonts that hide text until the font file arrives, so the headline that would have been your LCP is not painted yet.

What you can action without a developer

Resize and compress images before they go into the CMS. Most hero images are three to ten times larger than the space they display in. Turn on your CMS image quality setting, switch on the CDN toggle in your hosting dashboard, and remove the carousel above the fold that nobody clicks. These are content decisions and they routinely move LCP by a full second.

Resource load delay and element render delay are developer territory: preloading the LCP image, setting a high fetch priority, removing lazy loading from above the fold images, inlining critical CSS, deferring scripts. Ask for those by name.

INP: How Fast the Page Answers You

In human terms: you tapped "Add to cart" and nothing visibly happened for a beat. INP measures that beat.

INP watches every click, tap and key press across the whole time someone spends on the page, measures how long each one took to produce a visible update on screen, and reports close to the worst one. Not an average, and not the first interaction. That design is deliberate, because one stuck interaction is what a person actually remembers.

INP replaced FID in March 2024

This is the part out of date articles get wrong. INP became a Core Web Vital on 12 March 2024, replacing First Input Delay. Google announced the pending change in May 2023, giving the ecosystem roughly ten months of notice, and FID was retired from Google's tooling later in 2024.

Why the swap? FID only measured the delay before the browser started running the handler for your very first interaction. It ignored how long that handler took, and it ignored whether the screen ever updated. Almost every site passed FID, which made it useless as a quality signal. INP measures the full round trip, from your finger to the next frame painted, across every interaction on the page. Plenty of sites that scored comfortably green on FID now score amber or red on INP with nothing about the site having changed. The measurement got honest.

Part of INPWhat is happeningTypical cause when it is slow
Input delayThe browser is busy elsewhere and cannot start handling your tapThird party scripts, analytics, consent tools running long tasks
Processing timeYour site's own event handler code is runningHeavy JavaScript, expensive framework re-renders
Presentation delayThe handler finished and the browser is drawing the resultVery large DOM, complex layout, huge tables or lists

What commonly causes a bad INP

Third party tags are the usual culprit, and they are usually added by marketing rather than engineering. Consent management platforms, chat widgets, session recording and heatmap tools, A/B testing scripts, and a tag manager container that has quietly accumulated tags nobody has audited in two years. The browser has exactly one main thread, so anything sitting on it is a queue everyone else waits in.

The site's own JavaScript matters too: applications that re-render large trees on every state change, filter interfaces that recompute on each keystroke, and pages carrying a DOM of tens of thousands of nodes.

What you can action without a developer

Audit the tag list. Open your tag manager, list every tag, and for each one name the person who looks at its output. Tags that fail that test get removed. Then check whether the chat widget or consent banner can load after the page is interactive, because many offer exactly that. Removing three unused tracking scripts is a non-technical fix with a real INP effect.

Breaking up long tasks, yielding to the main thread, deferring rendering work and trimming the DOM are developer jobs.

CLS: How Much the Page Jumps Around

In human terms: you started reading, a banner loaded above what you were reading, the text shot downward, and your thumb landed on the wrong link. CLS scores how often and how badly that happens.

CLS multiplies how much of the screen moved by how far it moved, for every unexpected shift. Since June 2021 it does not simply add up every shift for the whole session. It groups shifts into windows (a new window starts after a one second gap, and no window runs longer than five seconds) and reports the worst single window. One catastrophic moment counts against you far more than a long tail of tiny nudges. Shifts within 500 milliseconds of a user interaction are exempt, so tapping "show more" and watching the page expand is not penalized.

What commonly causes a bad CLS

  • Images and videos with no width and height attributes and no CSS aspect ratio, so the browser reserves no space until the file arrives.
  • Ads, embeds and iframes injected into a container with no space reserved for it.
  • Cookie consent banners and notification bars inserted at the top of the page after first paint, pushing everything down.
  • Web fonts swapping in with different letter widths than the fallback, reflowing paragraphs under the reader.
  • Content injected above existing content by A/B testing or personalization tools.
  • Lazy loaded sections and infinite scroll that arrive without a placeholder.

A cookie banner that shoves content down is a CLS problem that is also a conversion problem. Anything that displaces or obscures the content someone just clicked through to read hurts twice, which is the same argument behind popups and interstitials after a search click.

What you can action without a developer

If your CMS editor lets you set image dimensions, set them, every time. Configure the consent banner as an overlay floating above the page rather than one that inserts itself at the top; most vendors ship both layouts and the choice sits in a settings panel. If a testing tool injects blocks above the fold, assume it owns your CLS score until proven otherwise.

Reserving space with CSS aspect ratio rules, preloading fonts and applying font metric overrides are developer tasks.

Lab Versus Field: Why Your Reports Disagree

This one distinction explains most Core Web Vitals arguments, so here it is plainly.

Lab data is a simulation. Lighthouse, which powers the bottom half of PageSpeed Insights and lives in Chrome DevTools, loads your page once, on one machine, over a deliberately throttled connection with a deliberately slowed CPU, with no extensions, no logged in session, no warm cache and nobody touching the screen.

Field data is what actually happened. CrUX aggregates measurements from real Chrome users on real devices and networks over a rolling 28 day window, reported at the 75th percentile. It is what appears at the top of PageSpeed Insights under the heading about what real users are experiencing, and it is what the Search Console Core Web Vitals report is built on.

Lighthouse (lab)CrUX (field)
Where the numbers come fromOne simulated load on one machineReal Chrome visits from opted in users
Time windowRight now, this secondRolling 28 days
Statistic reportedA single run75th percentile across all visits
Can it measure INPNo. It reports Total Blocking Time as a proxy, because nobody is clickingYes
CLS coverageOnly shifts during the initial loadThe whole visit, including scrolling and ad refresh
AvailabilityAlways, on any URLOnly where there is enough traffic to aggregate
Used by search ranking systemsNoYes

Read that INP row again. Lighthouse cannot measure INP at all. There are no interactions in a lab run. Any tool showing an INP figure from a single automated page load is showing you an estimate, usually derived from Total Blocking Time. This is why a page with a 98 Lighthouse score can sit in the red for INP in Search Console, and neither number is lying to you.

The CLS row matters almost as much. Lighthouse stops watching after load, so lab CLS understates the real thing. The ad that refreshes 30 seconds in, the lazy loaded footer, the sticky bar that appears on scroll: field CLS sees all of them and lab CLS sees none.

The Lighthouse score is not your Core Web Vitals

The performance score out of 100 is a weighted blend, and Google publishes the weights. They do not match how Core Web Vitals are assessed.

Lighthouse metricWeight in the performance scoreIs it a Core Web Vital
Total Blocking Time30 percentNo
Largest Contentful Paint25 percentYes
Cumulative Layout Shift25 percentYes
First Contentful Paint10 percentNo
Speed Index10 percentNo

Thirty percent of that score comes from a metric that is not a Core Web Vital, and one of the three that is (INP) carries zero weight, because it cannot be measured in a lab run. Optimizing until the number reads 100 is optimizing for the simulation. Treat it as a diagnostic, never as the target.

One honest note about traffic and CrUX

Field data comes from real Chrome users who have opted into usage statistics reporting, so no traffic service changes your Core Web Vitals. Ours included. Automated sessions are not part of that dataset, and any vendor telling you their traffic will fix your Core Web Vitals is either confused or selling something they cannot deliver. Understanding what separates real human clicks from automated ones is useful before you evaluate any claim in this area.

Reading the Search Console Report

Here is the walkthrough. Search Console's navigation labels move between releases, so match on the words rather than the position in the menu.

  1. Open Google Search Console and select the property. Use a domain property if you have one, so subdomains are included.
  2. In the left navigation, find the Experience group and open Core Web Vitals.
  3. You get two cards, Mobile and Desktop. Click Open report on Mobile first. Mobile is where the failures are.
  4. The chart at the top plots URL counts in Poor, Needs improvement and Good over roughly the last 90 days. The step changes in that chart are your deployment history, whether or not anyone labeled them.
  5. Below it sits a table of issues phrased like "CLS issue: more than 0.25 (mobile)", with a URL count beside each row.
  6. Click an issue row. You now see URL groups, not individual URLs, each with one example URL. Click the example, then use Inspect URL or the PageSpeed Insights link for detail.
  7. Once a fix is deployed, click Validate fix. Validation runs against incoming field data, so it takes weeks, not hours.

The grouping detail nobody explains

Step 6 is where non-engineers get blindsided.

Search Console does not evaluate your URLs one at a time. It sorts them into groups of similar pages, typically pages sharing a template, and applies the group's aggregated field data to every URL in that group. A URL you have never touched can be flagged Poor because its template siblings are slow. A page with barely any traffic of its own inherits the verdict of the group it belongs to. Two consequences follow, and both save you weeks:

  • Fix templates, not pages. Optimizing one product page and waiting for it to turn green will not work if the other 4,000 product pages in its group are unchanged. The group moves together or it does not move.
  • The example URL is a sample, not the problem. Running PageSpeed Insights on it and finding it fine does not mean the group is fine. It means you sampled a good one.

If Search Console is new to you, our full Search Console guide covers property setup and the Performance report.

Cross-check with PageSpeed Insights

Take the example URL to https://pagespeed.web.dev/ and read the page top to bottom in this order.

  • The top block, headed with wording about what real users are experiencing, is CrUX field data. This is the real score. If it says there is not enough data for this URL and falls back to origin level data, that URL is too low traffic to be assessed on its own, which is exactly why the grouping above exists.
  • The section underneath is Lighthouse. Treat it as a list of hypotheses about why the field data looks the way it does, not as a verdict.

Here is the pattern you are hunting for. Say the field block reports mobile LCP at 4.6 seconds, INP at 240 milliseconds and CLS at 0.02, while the Lighthouse block scores 91 and flags a render blocking stylesheet. The reading is: layout stability is fine, responsiveness is borderline, loading is the actual failure, and the 91 is irrelevant to the decision. Those figures are illustrative, not measured on any specific site.

Who Fixes What: You or a Developer

Print this one. It is the fastest way to stop a Core Web Vitals conversation turning into a standoff.

FixMetric it movesWho can do it
Resize and compress images before uploadingLCPYou, in the CMS
Set width and height on images in the editorCLSYou, in the CMS
Delete unused tags from the tag managerINPYou, in the tag manager
Switch the consent banner from a push down layout to an overlayCLSYou, in the vendor settings
Turn off a hero carousel nobody clicksLCPYou, in the CMS
Deactivate unused CMS plugins that inject scriptsINP, LCPYou, in the CMS admin
Enable the CDN or a caching plan in the hosting dashboardLCPYou, in hosting
Remove lazy loading from the hero imageLCPDeveloper
Preload the LCP image and set a high fetch priorityLCPDeveloper
Inline critical CSS, defer non critical CSS and JavaScriptLCPDeveloper
Break up long JavaScript tasks and yield to the main threadINPDeveloper
Reserve space with CSS aspect ratio rulesCLSDeveloper
Preload fonts and apply font metric overridesCLS, LCPDeveloper
Reduce server response time with caching or a better hosting tierLCPDeveloper or host
Render on the server instead of only in the browserLCPDeveloper

A checklist to run before you ask for budget

Most sites find their answer in the first three.

  1. Open the mobile Core Web Vitals report. Which metric is failing? If more than one is, take the one covering the most URLs first.
  2. Open the largest failing group's example URL in PageSpeed Insights and confirm the field data agrees with Search Console.
  3. Download the hero image from the failing template and check its file size. Over 300 KB on a page that displays it at 800 pixels wide is a content problem you own.
  4. List every tag in your tag manager container. Count the ones for which nobody can name an owner.
  5. Load the page on a real mid range phone on mobile data, not on desktop Chrome with the device emulator. Tap the primary button. Count.
  6. Reload and watch the top of the page without scrolling. Does the consent banner shift anything?
  7. Only now write the developer ticket. It should name the metric, the template, the current field value and the target band. Not "make the site faster".

How Much Core Web Vitals Matter for Rankings

Here is the honest version, because overselling this is how SEO budgets get wasted.

Core Web Vitals are a real input to search ranking systems and they are a small one. Google's page experience guidance is explicit that a good page experience does not override having genuinely relevant, useful content. A fast page that fails to answer the query loses to a slower page that answers it. If your pages are not ranking, Core Web Vitals are rarely the reason, and fixing them will not create rankings on their own.

Where the work does pay off:

  • When you are already competitive. Between pages of comparable relevance and authority, experience signals can be part of what separates them.
  • On conversion, which is not a ranking argument at all. A page that loads in 2 seconds instead of 5, and does not move under the reader's thumb, converts better. That effect is yours regardless of what any ranking system does with the data.
  • As a symptom. A page failing LCP badly usually fails because of something else worth fixing: a bloated template, an over-plugged CMS, a hosting tier that stopped being adequate two years ago.

Treat Core Web Vitals as part of the broader technical SEO baseline: things that should be in order rather than things that generate growth by themselves. Be as skeptical of "fix Core Web Vitals to rank" as you should be of any single-lever ranking claim, in the same way that bounce rate is not a ranking factor despite how often it gets presented as one. The neighboring work that actually compounds is making sure the page delivers on the promise that earned the click, covered in satisfying search intent above the fold.

A Before and After Test That Will Not Fool You

Field data moves slowly and looks noisy. Without a design you will either declare victory too early or conclude your fix did nothing.

Baseline. Before changing anything, record the field values for the failing URL group: LCP, INP and CLS from PageSpeed Insights for the example URL, plus the URL counts in each band from Search Console. Note the date. CrUX will not show you what the number was last month.

Control set. Pick a second template failing in a similar way and deliberately leave it alone. Almost everybody skips this, and it is the step that separates your fix from a seasonal traffic shift, a change in device mix or a Chrome release. If both groups improve, your fix was not the cause.

Change window. Deploy to the treatment template only, and log the exact date and time somewhere you will find it again.

Wait properly. CrUX aggregates over 28 rolling days, so the day after deployment the reported number still contains 27 days of the old behavior. Expect partial movement around day 10 and the full effect at day 28. Reading the number on day 3 and concluding nothing changed is the most common self-inflicted wound in this work.

What counts as signal. Judge on the band, not the decimal. LCP moving from 4.6 to 4.4 seconds is noise. LCP moving from 4.6 to 2.3 seconds, crossing Poor to Good, is a result. In Search Console, watch the count of URLs in the Good band for that group, not the example URL's individual figure.

Real user monitoring, if a developer can add it, gives you your own field data daily instead of on a 28 day lag, segmented by template, device and country in ways CrUX will not offer.

Frequently asked questions

FAQ

What are the Core Web Vitals thresholds for a good score?

Google's published thresholds are LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less, each measured at the 75th percentile of real page loads. A URL group has to land in the good band on all three to be assessed as good overall.

When did INP replace FID as a Core Web Vital?

INP became a Core Web Vital on 12 March 2024, replacing First Input Delay. Google announced the change in May 2023 to give sites time to prepare, and FID was retired from Google's tooling later in 2024. Any guide still telling you to optimize for FID is out of date.

Why does PageSpeed Insights show a good score when Search Console says my pages are poor?

Because they measure different things. The Lighthouse score in PageSpeed Insights is a simulated load on one machine right now, while Search Console uses CrUX field data from real Chrome users over a rolling 28 days at the 75th percentile. Lighthouse also cannot measure INP at all, so a high lab score tells you nothing about your responsiveness.

Do Core Web Vitals affect rankings?

They are a real but small input to search ranking systems, and relevance outweighs them. Google's page experience guidance states plainly that a good page experience does not override having relevant, useful content, so fixing Core Web Vitals will not lift rankings on its own.

How long does a Core Web Vitals fix take to show up?

Field data aggregates over a rolling 28 day window, so expect partial movement around day 10 and the full effect at day 28 after deployment. Search Console validation runs on that same incoming field data, which is why it takes weeks rather than hours.

Can a non-developer improve Core Web Vitals?

Yes, more than most people expect. Compressing images before upload, setting image dimensions in the CMS, deleting unused tags from the tag manager, switching a consent banner from a push down layout to an overlay, and turning off an unused hero carousel are all non-technical and all move real numbers. Preloading, critical CSS, main thread work and font metric overrides need a developer.

About the Author

The SparkCliks Team writes about search click behavior, search experience and website traffic at sparkcliks.com. We publish what the measurement actually supports, including the inconvenient parts: where a signal is contested, where a metric is a proxy rather than a fact, and where a fix will not do what a vendor claims. Questions or corrections on this guide are welcome at hello@sparkcliks.com.

Primary sources referenced: Google's Web Vitals documentation on LCP, INP and CLS, the Web Vitals overview, the Chrome User Experience Report documentation, and Google Search Central's page experience guidance.

Keep reading

Related articles