What Is Core Web Vitals and How to Improve Them
Summary: Core Web Vitals are three Google metrics that measure real-world user experience: LCP (loading speed — under 2.5 seconds), INP (interactivity — under 200 milliseconds), and CLS (visual stability — under 0.1). They've been a confirmed Google ranking factor since June 2021. Measure them with PageSpeed Insights and fix them with image optimisation, reduced JavaScript, and proper layout dimensions.
Google doesn't just care about what's on your page — it cares about how your page feels to use. Core Web Vitals are Google's way of measuring that experience with hard numbers: how fast your page loads, how quickly it responds to clicks, and whether the layout jumps around while loading. Pages that fail these metrics provide a poor user experience, and Google penalises them in rankings accordingly.
According to web.dev's Core Web Vitals documentation, these metrics were designed to capture the most critical aspects of user experience. They're not abstract lab measurements — they're based on real user data from millions of Chrome users, reflecting how actual visitors experience your site in the wild.
A Backlinko analysis of page speed data found that pages loading within 2 seconds have an average bounce rate of 9%, while pages taking 5 seconds see bounce rates jump to 38%. Every second matters — and Core Web Vitals give you the exact targets to aim for.
The Three Core Web Vitals Explained
1. Largest Contentful Paint (LCP) — Loading Performance
What it measures: How long it takes for the largest visible element on the page to fully render. This is usually a hero image, a large text block, or a video thumbnail. LCP represents when the user feels the page has "loaded" — even if background scripts and smaller elements are still processing.
Target:
Why it matters: LCP is the most impactful Core Web Vital for perceived performance. Users judge a page's speed primarily by how quickly the main content appears. A page that shows a blank screen or loading spinner for 4+ seconds will lose visitors — research shows 53% of mobile users abandon sites that take longer than 3 seconds to load.
Common LCP elements: <img> tags, <video> poster images, elements with CSS background-image, and block-level text elements like <h1> or <p> tags. PageSpeed Insights tells you exactly which element is your LCP.
2. Interaction to Next Paint (INP) — Interactivity
What it measures: How quickly your page responds to user interactions — clicks, taps, and keyboard inputs. INP measures the delay from when a user interacts with an element to when the browser finishes processing that interaction and paints the visual result. It replaced First Input Delay (FID) as a Core Web Vital in March 2024.
Target:
Why it matters: When a user clicks a button and nothing happens for half a second, it feels broken. INP captures this frustration. Unlike FID (which only measured the first interaction), INP measures the worst interaction latency throughout the entire page session — meaning your page needs to stay responsive the whole time, not just on first load.
The usual culprit: Heavy JavaScript. Long-running scripts block the browser's main thread, preventing it from processing user inputs. Third-party scripts (analytics, chat widgets, ad networks) are frequently the worst offenders.
3. Cumulative Layout Shift (CLS) — Visual Stability
What it measures: How much the visible content shifts around while the page is loading. Have you ever started reading an article, then an ad loads above it and pushes everything down? Or tried to click a button, but a banner appeared and you accidentally clicked the wrong thing? That's layout shift — and CLS quantifies it.
Target:
Why it matters: Layout shift is one of the most frustrating user experiences on the web. It causes mis-clicks, makes content hard to read, and breaks trust. CLS is a unitless score — it considers both how much content shifted and how far it moved. A score of 0 means nothing moved; anything above 0.1 means your users are experiencing noticeable visual instability.
Common causes: Images without width/height attributes, ads or embeds that load late, web fonts that cause text to reflow (FOUT — Flash of Unstyled Text), and dynamically injected content above existing content.
Why Core Web Vitals Are a Ranking Factor
Google announced in November 2020 that Core Web Vitals would become ranking signals, and the rollout began in June 2021. They're part of the broader "page experience" ranking signals, which also include mobile-friendliness, HTTPS, and the absence of intrusive interstitials.
How significant are they? Google has said that content relevance still outweighs page experience — a highly relevant page with poor Core Web Vitals can still outrank a less relevant page with perfect scores. But when multiple pages compete for the same keyword with similar content quality, Core Web Vitals become the tiebreaker. In competitive niches, that tiebreaker can mean the difference between page 1 and page 2.
Data from the HTTP Archive shows that websites passing all three Core Web Vitals thresholds have been steadily increasing — from around 33% of origins in 2021 to over 50% in 2025. As more sites achieve good scores, having poor Core Web Vitals becomes an increasingly significant disadvantage.
Beyond rankings, there's a direct business impact. A study by Google found that sites meeting all Core Web Vitals thresholds saw 24% fewer page abandonments. For e-commerce, Vodafone found that a 31% improvement in LCP led to a 15% improvement in conversion rate. Speed and responsiveness directly translate to revenue.
How to Measure Core Web Vitals
There are two types of Core Web Vitals data: lab data (simulated in a controlled environment) and field data (collected from real users). Google uses field data for ranking decisions, but lab data is essential for debugging because you can reproduce and test specific issues.
PageSpeed Insights
PageSpeed Insights is Google's primary tool for measuring Core Web Vitals. Enter any URL and it shows both field data (from the Chrome User Experience Report) and lab data (from Lighthouse). The field data section shows real-world LCP, INP, and CLS values at the 75th percentile — meaning 75% of your visitors experience that score or better. This is the same data Google uses for ranking.
Pro tip: Focus on the "Discover what your real users are experiencing" section at the top. That's the data that matters for SEO. The lab data below is useful for diagnosing specific issues but doesn't directly affect rankings.
Google Search Console
Search Console has a dedicated Core Web Vitals report under Experience in the left sidebar. It categorises all your URLs as Good, Needs Improvement, or Poor for both mobile and desktop. This is the best tool for monitoring site-wide Core Web Vitals health because it shows trends over time and groups pages by issue type.
Chrome User Experience Report (CrUX)
The Chrome User Experience Report is the dataset behind the field data in PageSpeed Insights and Search Console. It collects anonymised performance data from Chrome users who have opted in to usage statistic reporting. You can query CrUX directly through the CrUX API or BigQuery for large-scale analysis across your entire site or for competitive benchmarking.
Lighthouse
Lighthouse is built into Chrome DevTools. Open DevTools (F12), go to the Lighthouse tab, and run a performance audit. It provides lab-based measurements and specific, actionable recommendations for improvement. Lighthouse is best for debugging — it tells you exactly which elements are causing LCP delays, which scripts are blocking interactivity, and which elements are causing layout shifts.
Web Vitals Chrome Extension
The Web Vitals Chrome extension shows real-time Core Web Vitals as you browse your site. It displays LCP, INP, and CLS values in a small overlay — useful for quick spot-checking as you navigate through pages. It also shows whether the data is from the current session (lab-like) or from CrUX (field data).
Clarity SEO's speed check also measures your page performance and highlights Core Web Vitals issues as part of your overall SEO audit.
→ Check your site speed for free
How to Improve LCP (Largest Contentful Paint)
LCP is the metric most sites struggle with. Here are the most effective fixes, in order of impact:
Optimise Your LCP Image
In most cases, the LCP element is an image. Run PageSpeed Insights to identify which image is your LCP element, then:
<picture> with fallbacks for older browsers.srcset and sizes attributes.<link rel="preload" as="image" href="/hero.webp"> in the <head> so the browser starts downloading it immediately, not after parsing CSS and other resources.loading="lazy") defers loading until the image is near the viewport — which delays your LCP. Only lazy-load images below the fold. Your hero/banner image should load eagerly with loading="eager" or fetchpriority="high".Improve Server Response Time (TTFB)
Time to First Byte (TTFB) is how long it takes your server to respond to a request. A slow TTFB delays everything — including LCP. Target under 800ms.
Eliminate Render-Blocking Resources
CSS and JavaScript files that load in the <head> block the browser from rendering content until they're fully downloaded and parsed. This directly delays LCP.
<link rel="preload">.defer or async to script tags. defer downloads the script in parallel and executes it after the HTML is parsed. async downloads and executes as soon as possible — use defer for most scripts.How to Improve INP (Interaction to Next Paint)
INP measures how responsive your page feels when users interact with it. The fix is almost always about reducing JavaScript execution time on the main thread.
Reduce JavaScript Execution Time
import()) to load code only when it's needed. Next.js does this automatically per route, but components imported normally are still bundled together.Break Up Long Tasks
Any JavaScript task that runs for more than 50ms is a "long task" that blocks user interactions. Break long tasks into smaller chunks using setTimeout(), requestAnimationFrame(), or the newer scheduler.yield() API. This allows the browser to process user inputs between chunks.
Use Web Workers for Heavy Processing
If your page does heavy computation (data processing, complex calculations, image manipulation), move it to a Web Worker. Web Workers run JavaScript on a separate thread, keeping the main thread free for user interactions. This is especially impactful for data-heavy dashboards and interactive applications.
Optimise Event Handlers
{ passive: true } to tell the browser the handler won't call preventDefault(), allowing it to scroll immediately without waiting for your JavaScript.How to Improve CLS (Cumulative Layout Shift)
CLS is often the easiest Core Web Vital to fix because the causes are usually straightforward:
Always Set Image and Video Dimensions
The number one cause of layout shift is images loading without explicit dimensions. When the browser doesn't know how tall an image will be, it allocates zero space — then suddenly pushes everything down when the image loads. Always include width and height attributes on every <img> and <video> tag. Modern browsers use these to calculate the aspect ratio and reserve space before the image downloads.
<!-- Bad: No dimensions — causes layout shift -->
<img src="hero.jpg" alt="Hero image" />
<!-- Good: Dimensions set — browser reserves space -->
<img src="hero.jpg" alt="Hero image" width="1200" height="630" />
<!-- Also good: CSS aspect-ratio -->
<img src="hero.jpg" alt="Hero image" style="aspect-ratio: 16/9; width: 100%;" />Handle Web Font Loading
Web fonts can cause two types of layout shift: FOUT (Flash of Unstyled Text) where text renders in a fallback font then swaps to the web font, and FOIT (Flash of Invisible Text) where text is invisible until the font loads. Both cause content to reflow and shift.
font-display: swap: Shows text immediately in a fallback font, then swaps. This improves LCP but can cause CLS if the fonts have very different metrics.font-display: optional: Only uses the web font if it's already cached. No flash, no shift — but the first visit uses the system font. Best for CLS.<link rel="preload" as="font" type="font/woff2" href="/font.woff2" crossorigin> to download fonts earlier.size-adjust, ascent-override, and descent-override properties let you match fallback font metrics to your web font, minimising reflow when the swap happens.Reserve Space for Dynamic Content
min-height. Without this, ads that load late push all content below them down the page.Core Web Vitals and Mobile Performance
Google uses mobile Core Web Vitals data for ranking — even for desktop search results (due to mobile-first indexing). This means your mobile performance is what matters most. Mobile devices have slower processors, less memory, and often slower network connections, making every optimisation more critical.
Check our guide on how to make your website mobile-friendly for a comprehensive look at mobile optimisation. Core Web Vitals and mobile-friendliness are closely related — a site that fails Core Web Vitals on mobile is almost certainly providing a poor mobile experience overall.
Core Web Vitals and Your SEO Score
Core Web Vitals directly impact your overall SEO score. SEO audit tools — including Clarity SEO — factor page speed and user experience metrics into their scoring. Pages with poor Core Web Vitals typically score lower in performance categories, dragging down the overall grade. Improving these metrics is one of the fastest ways to boost your SEO score.
For a detailed look at page speed testing and what the numbers mean, see our guide on how to check website speed.
Core Web Vitals Optimization Checklist
FAQ
What are Core Web Vitals?
Core Web Vitals are a set of three specific metrics that Google uses to measure the user experience of a web page: Largest Contentful Paint (LCP) measures loading speed, Interaction to Next Paint (INP) measures interactivity and responsiveness, and Cumulative Layout Shift (CLS) measures visual stability. Together, they quantify how fast your page loads, how quickly it responds to user input, and whether the layout stays stable during loading. Google uses these metrics as ranking signals — meaning they directly influence where your pages appear in search results.
Are Core Web Vitals a direct ranking factor?
Yes. Google confirmed in 2020 that Core Web Vitals are ranking signals, and they became active in June 2021. However, they're not the strongest ranking factor — content relevance, backlinks, and search intent still matter more. Core Web Vitals act as a tiebreaker: when two pages have similar content quality and relevance, the one with better user experience metrics will rank higher. In competitive niches where many pages offer similar content, this tiebreaker becomes increasingly significant.
What replaced First Input Delay (FID)?
Interaction to Next Paint (INP) replaced FID as a Core Web Vital in March 2024. FID only measured the delay of the first interaction on a page, which didn't capture responsiveness issues that occurred later in a user's session. INP measures the latency of all interactions throughout the page visit and reports the worst one — giving a much more accurate picture of how responsive your page actually feels to users. If your site passed FID but struggles with INP, it likely has JavaScript that runs heavy operations after initial load.
How do I check my Core Web Vitals?
The quickest way is PageSpeed Insights — enter your URL and it shows both real-user data and lab measurements. For site-wide monitoring, use the Core Web Vitals report in Google Search Console (under Experience). For real-time checking while browsing, install the Web Vitals Chrome extension. For deep debugging, use Chrome DevTools Lighthouse and Performance panels. Clarity SEO also checks speed performance as part of its free audit.
What is the most common cause of poor Core Web Vitals?
For LCP, the most common cause is unoptimised images — large file sizes, missing preload hints, and lazy-loading above-the-fold images. For INP, the primary culprit is excessive JavaScript, especially third-party scripts (analytics, chat widgets, ads) that block the main thread. For CLS, images without width/height attributes are the single biggest cause, followed by web fonts that cause text reflow and dynamically inserted content. Most sites can dramatically improve all three metrics with image optimisation, JavaScript reduction, and adding explicit dimensions to media elements.
How long does it take for Core Web Vitals improvements to affect rankings?
Core Web Vitals field data is based on a 28-day rolling average from the Chrome User Experience Report. So after you make improvements, it takes about 28 days for the new data to fully replace the old data. After that, Google needs to recrawl your pages and update its assessment. In total, expect 1-2 months between implementing fixes and seeing the full ranking impact. You can verify improvements immediately using lab tools like Lighthouse, but the ranking benefit comes from field data.
Related Guides
Core Web Vitals are one part of your site's overall performance and SEO health. Explore these related guides:
Summary
Core Web Vitals are Google's UX metrics — and they're a confirmed ranking factor. LCP under 2.5 seconds, INP under 200ms, and CLS under 0.1 are your targets. Measure them with PageSpeed Insights and Search Console. Fix LCP with image optimisation, preloading, and faster servers. Fix INP by reducing JavaScript and breaking up long tasks. Fix CLS by setting image dimensions, handling fonts properly, and reserving space for dynamic content. The fixes are well-documented, the tools are free, and the impact on both rankings and user experience is measurable. Start with your worst-performing pages and work outward.
Check your Core Web Vitals now with a free Clarity SEO audit: