Core Web Vitals are Google's standardised metrics for measuring real-world user experience on websites. They're used as ranking signals in Google Search and as eligibility criteria for certain rich results features.
Understanding what each metric measures — and what actually moves the needle on each one — is the starting point for any Core Web Vitals improvement programme.
What Are Core Web Vitals?
Core Web Vitals are a subset of Google's Web Vitals framework, specifically focused on loading performance, visual stability, and interactivity. They're measured using real-user data from the Chrome User Experience Report (CrUX), which aggregates field data from Chrome users across the web.
As of 2024, the three Core Web Vitals are:
- LCP (Largest Contentful Paint) — loading performance
- CLS (Cumulative Layout Shift) — visual stability
- INP (Interaction to Next Paint) — responsiveness
INP replaced FID (First Input Delay) as a Core Web Vital in March 2024. The shift reflects Google's desire to measure overall page responsiveness throughout the user's session, not just the first interaction.
LCP: Largest Contentful Paint
What it measures
LCP measures the time from when a page starts loading to when the largest visible content element — typically a hero image, heading, or large text block — has rendered within the viewport.
It captures what users care about: when can I see the main content?
Good, needs improvement, poor thresholds
- Good: under 2.5 seconds
- Needs improvement: 2.5–4 seconds
- Poor: over 4 seconds
What causes poor LCP
The most common causes:
- Slow server response time (TTFB) — everything depends on when the first byte arrives
- Render-blocking resources — CSS and JavaScript that must execute before the LCP element can render
- Unoptimised images — large, uncompressed images in legacy formats (JPEG/PNG instead of WebP/AVIF)
- No preload for the LCP image — the browser doesn't discover the LCP image until late in the waterfall
How to improve LCP
Preload the LCP image. Add <link rel="preload" as="image" href="/hero.webp"> in the <head> so the browser discovers and fetches it as early as possible.
Use modern image formats. WebP typically reduces image file size by 25–35% compared to JPEG at equivalent quality. AVIF reduces it further. Use <picture> with format fallbacks for browser compatibility.
Reduce server response time. Use a CDN to serve content from edge nodes close to users. Enable caching at the CDN layer. A target TTFB of under 600ms is achievable for most sites.
Eliminate render-blocking resources. Defer non-critical JavaScript (defer or async attributes). Load non-critical CSS asynchronously. Inline critical CSS for above-the-fold content.
CLS: Cumulative Layout Shift
What it measures
CLS measures visual stability — how much the page layout shifts unexpectedly during loading. A high CLS score means elements move around as the page loads, causing users to mis-tap buttons, lose their reading position, or experience frustration.
The CLS score represents the sum of all unexpected layout shift scores during the page's lifetime.
Good, needs improvement, poor thresholds
- Good: under 0.1
- Needs improvement: 0.1–0.25
- Poor: over 0.25
What causes poor CLS
Images without dimensions — If <img> elements don't have explicit width and height attributes, the browser doesn't know how much space to reserve and the layout shifts when the image loads.
Ads and embeds that load late — Advertising slots, social media embeds, and third-party widgets that render after the initial layout cause content to jump down the page.
Late-loading fonts causing FOUT — Font swap events (where the browser first renders fallback text, then swaps in the web font) cause visible layout shifts.
Dynamically injected content — Banners, cookie notices, and chat widgets that appear above existing content push everything down.
How to improve CLS
Always set width and height on images. Modern browsers use these attributes to calculate aspect ratios and reserve space before the image loads.
Reserve space for ads and embeds. Use explicit containers with fixed dimensions for any third-party content that loads asynchronously.
Use font-display: optional or swap with size-adjust. The size-adjust CSS property allows you to make your fallback font match the web font's dimensions, minimising the layout shift when the web font loads.
Load dynamic content below the fold, or at the bottom of the viewport. Cookie banners and chat widgets that can't be removed should appear at the bottom of the screen, where they don't shift existing content.
INP: Interaction to Next Paint
What it measures
INP measures the responsiveness of a page to user interactions — clicks, taps, and keyboard inputs — throughout the entire page session. It captures the latency from when the user initiates an interaction to when the browser paints the next visual update.
Unlike FID (which only measured the first interaction), INP measures all interactions and reports the worst-case latency (at approximately the 98th percentile). This means a single slow interaction can produce a poor INP score even if most interactions are fast.
Good, needs improvement, poor thresholds
- Good: under 200ms
- Needs improvement: 200–500ms
- Poor: over 500ms
What causes poor INP
Heavy JavaScript execution on the main thread — Long tasks that block the main thread prevent the browser from responding to user interactions promptly. A 500ms JavaScript execution means any interaction during that period won't register until the task completes.
Slow event handlers — JavaScript event listeners that perform heavy DOM manipulation, complex calculations, or synchronous data fetching cause high interaction latency.
Large DOM size — Pages with many thousands of DOM nodes are slower to update in response to user actions.
Third-party scripts — Analytics, advertising, and chat scripts that execute on the main thread contribute to INP bloat.
How to improve INP
Break up long tasks. Use scheduler.yield() or setTimeout(() => {}, 0) to yield control back to the browser between task chunks, allowing it to process user interactions.
Defer non-critical JavaScript. Scripts that don't need to execute on load should be deferred or loaded with async.
Reduce DOM size. For pages with very large DOM trees, consider virtualising long lists — only rendering the visible portion and swapping elements as the user scrolls.
Audit third-party scripts. Use Chrome DevTools Performance panel to identify which third-party scripts are contributing to main thread blocking.
How Core Web Vitals Affect Rankings
Core Web Vitals are a confirmed Google ranking signal, incorporated as part of the Page Experience signals in 2021 (LCP, CLS) with INP added in 2024. Pages that "pass" all three metrics (Good threshold for all three) receive a ranking boost over equivalent pages that fail.
The practical impact varies by query type and competitive landscape. For highly competitive queries where multiple pages have strong content quality, Core Web Vitals can be a tiebreaker. For less competitive queries, the impact is typically smaller.
More significant is the indirect effect: fast, stable, responsive pages have better engagement metrics (lower bounce rates, higher time on page, more conversions) which contribute to overall organic performance.
Measuring Core Web Vitals
Field data (real users): Google Search Console's Core Web Vitals report shows LCP, CLS, and INP for your pages based on real Chrome user data. This is the data Google uses for ranking — prioritise fixing issues flagged here.
Lab data (simulated): PageSpeed Insights and Lighthouse provide lab measurements useful for development and debugging. Lab scores don't always match field data because they use a single simulated device and network condition.
Chrome DevTools: For diagnosing INP specifically, the Performance panel in DevTools allows you to record interactions and identify the long tasks or event handlers causing high latency.
FAQs
Are Core Web Vitals the most important SEO ranking factor? No. Content quality, E-E-A-T signals, backlinks, and topical relevance are all significantly more influential than Core Web Vitals for most queries. Core Web Vitals matter as a tiebreaker and for maintaining good user experience.
My lab score is good but my field score is poor — why? Lab tests use controlled conditions (simulated mid-range device, 4G network). Real users have varied devices and connections, may load the page with many tabs open, or may interact with the page in ways that trigger poor INP. Field data reflects the full distribution of real user experiences.
Does CLS affect desktop and mobile differently? CLS is measured separately for desktop and mobile in Search Console. Mobile tends to have more layout instability due to different screen sizes triggering different layouts. Fix both.
What's the easiest Core Web Vital to improve?
CLS tends to be the most actionable for developers — adding width and height attributes to images and reserving space for ads can dramatically improve CLS with relatively simple changes.
For a full Core Web Vitals audit and improvement plan, get in touch or start with a free audit.
