Core Web Vitals: How to Measure and Improve LCP, INP, and CLS

Core Web Vitals are the three metrics Google uses to measure what real visitors experience on your pages: loading speed, responsiveness, and visual stability. They show up in Search Console, feed into Google's ranking systems, and, more importantly, shape the first impression of every prospect who lands on your site. This guide explains what Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift measure, how to read your results without fooling yourself, and which fixes deliver the biggest gains.

Key takeaways

• The three Core Web Vitals are LCP (loading, good at 2.5 s or less), INP (responsiveness, good at 200 ms or less), and CLS (stability, good at 0.1 or less).
• Google assesses them on real-user data, at the 75th percentile, over a rolling 28-day window.
• INP replaced FID in March 2024, and plenty of sites that used to pass no longer do.
• A perfect Lighthouse score in the lab does not guarantee you pass the field assessment.
• Fix by page template, not URL by URL.

What are Core Web Vitals?

Core Web Vitals are a subset of Web Vitals, Google's initiative to give site owners unified quality signals for user experience. Each metric covers one dimension of what a visitor feels:

• Largest Contentful Paint (LCP): time until the largest visible element renders (hero image, headline block, video poster). It answers "does the page show up fast?"
• Interaction to Next Paint (INP): delay between an interaction (click, tap, key press) and the next visual update, measured across the whole visit. It answers "does the page respond fast?"
• Cumulative Layout Shift (CLS): the sum of unexpected layout shifts. It answers "does the page stay put?"

Core Web Vitals do not measure how fast your server is; they measure what a human experiences in front of the screen. That is why Google relies on real visitor data rather than simulated tests.

Core Web Vitals thresholds

Google rates each metric on three levels:

• LCP: good: 2.5 s or less; needs improvement: 2.5 s to 4 s; poor: over 4 s.
• INP: good: 200 ms or less; needs improvement: 200 ms to 500 ms; poor: over 500 ms.
• CLS: good: 0.1 or less; needs improvement: 0.1 to 0.25; poor: over 0.25.

To pass the Core Web Vitals assessment, all three metrics must be good at the 75th percentile of page loads, meaning for at least three out of four visits. Mobile and desktop are assessed separately, and mobile is where most sites fail.

Field data vs lab data: the most common mistake

This is where most confusion starts. When you run PageSpeed Insights, you see two distinct sections:

• Field data (CrUX): collected from real Chrome users over the past 28 days. This is what Google and Search Console use. It only exists if the page or origin has enough traffic.
• Lab data (Lighthouse): a simulated test on a fixed device and connection. Great for diagnosing issues and comparing before and after a fix, but not what Google evaluates.

The lab cannot measure INP, because nobody is clicking. Lighthouse shows Total Blocking Time (TBT) instead, which is a useful proxy. A Lighthouse score of 95 alongside a failed field assessment is not a contradiction: your real visitors have slower phones and networks than the test does.

One more nuance: when a specific URL does not have enough traffic for its own field data, PageSpeed Insights falls back to origin-level data, an aggregate of your whole domain. Search Console works similarly by grouping similar URLs together. That is why a fix on a high-traffic template can move the status of many low-traffic pages at once, and why one slow template can drag down pages that look fine in isolation.

How to run a Core Web Vitals test

Use these tools, in this order:

1. Google Search Console, Core Web Vitals report: site-wide view, URLs grouped by similar template, mobile and desktop status. Start here.
2. PageSpeed Insights: analysis of a single URL, with field data and lab diagnostics. The most direct Core Web Vitals test for one page.
3. Chrome DevTools, Performance panel: shows Core Web Vitals live as you browse and pinpoints the LCP element, long tasks, and shifting elements.
4. CrUX Dashboard or CrUX API: month-by-month history to track trends.
5. Real User Monitoring (RUM): for example, the open-source web-vitals library sending data to GA4, or a commercial RUM tool. Essential if you want per-page data, including low-traffic pages.

Do Core Web Vitals affect SEO?

Yes, with caveats. Google says Core Web Vitals are used by its ranking systems, while stressing that relevant, helpful content still comes first. A slower page that is clearly more useful than its competitors can still outrank them. Core Web Vitals work mostly as a tiebreaker between pages of similar quality, and as a conversion lever far more than a ranking lever. A page that loads fast, responds instantly, and does not move the button as you tap it keeps more visitors, which also shows in your bounce rate.

How to improve Largest Contentful Paint

First identify the LCP element on each template (DevTools and PageSpeed Insights both show it). Then apply the highest-impact fixes:

• Never lazy-load the LCP image: remove loading="lazy" from the main above-the-fold image.
• Prioritize it with fetchpriority="high", or a preload if the image is set in CSS.
• Make it lighter: serve AVIF or WebP, sized for the viewport with srcset.
• Cut server response time (TTFB): page caching, a CDN, properly sized hosting.
• Remove render-blocking resources: inline critical CSS, defer non-essential JavaScript.
• Do not make main content depend on client-side JavaScript to appear (use server-side rendering or static generation). On Shopify, WordPress, or Webflow, audit theme and app scripts first.

How to improve Interaction to Next Paint

INP suffers when the browser's main thread is busy at the moment a user interacts. Your levers:

• Break up long tasks: any task over 50 ms blocks the main thread. Split work and yield back to the browser between steps.
• Trim third-party scripts: chat widgets, marketing tags, A/B testing tools, heatmaps. Load them after interaction or remove the ones nobody uses.
• Give instant visual feedback after a click, then run the heavy processing.
• Keep the DOM lean: thousands of nodes make every update more expensive.
• Audit heavy event handlers on menus, filters, and forms.

How to fix Cumulative Layout Shift

CLS almost always has simple causes:

• Set dimensions on images and videos with width and height attributes or the CSS aspect-ratio property.
• Reserve space for injected elements: banners, ad slots, iframes, review widgets.
• Control font loading: use an appropriate font-display value and fallback fonts with matching metrics to avoid text jumps.
• Never insert content above existing content after load, unless it responds to a user action.
• Animate with transform instead of properties that change top, left, width, or height.

Action plan: how to pass the Core Web Vitals assessment

1. Open the Search Console report and note, for mobile and desktop, the failing URL groups and the metric at fault.
2. Map each group to a template (blog post, service page, product page, category).
3. For each template, test a representative URL in PageSpeed Insights and pin down the exact cause.
4. Fix at the template level, then confirm the fix in the lab.
5. Once live, click "Validate fix" in Search Console. Validation relies on field data, so expect it to take around 28 days.
6. Set up RUM monitoring to catch regressions after every release.

Core Web Vitals FAQ

What are the Core Web Vitals?

They are three metrics Google defined to measure real user experience: LCP for loading speed, INP for responsiveness, and CLS for visual stability. They are measured on real visitors and reported in Search Console.

What is a good LCP score?

A good Largest Contentful Paint is 2.5 seconds or less at the 75th percentile of visits. Between 2.5 and 4 seconds needs improvement, and anything over 4 seconds is poor.

How do you pass the Core Web Vitals assessment?

All three metrics (LCP, INP, CLS) must be in the "good" range at the 75th percentile of real-user visits over 28 days. Fix the failing metric at the template level, then validate in Search Console.

What causes poor Core Web Vitals scores?

The usual culprits are heavy or lazy-loaded hero images and slow servers (LCP), too much JavaScript and third-party scripts (INP), and images, ads, or fonts without reserved space (CLS).

Why does my site fail Core Web Vitals when my PageSpeed score is high?

The score is a lab test, while the assessment uses field data from your real visitors. Slower devices, weaker networks, and third-party scripts that fire after load explain the gap.

Get your pages into the green

Improving Core Web Vitals means combining field data, technical diagnosis, and trade-offs with marketing teams, who are often the ones adding third-party scripts. Our technical SEO services team identifies failing templates, scopes the fixes, and works with your developers through Search Console validation. Get your free action plan to see which pages to fix first.

Related guides

• SEO audit: how to do one in 7 steps
• Bounce rate: what it means and how to reduce it
• Website migration without losing SEO