Core Web Vitals: A Practical Optimization Guide

A hands-on guide to diagnosing and fixing Core Web Vitals. Learn how LCP, INP, and CLS actually work, which tools give trustworthy data, and the concrete fixes that move the needle.

Core Web Vitals (CWV) are Google's field-data metrics for user experience, and they feed directly into the page experience signals that inform ranking. In March 2024, Interaction to Next Paint (INP) replaced First Input Delay as the responsiveness metric, so if your last audit predates that change, your priorities are likely out of date. This guide focuses on the three metrics that matter in 2026 and the specific engineering work that improves them.

Core Web Vitals A set of three field metrics—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—that Google uses to quantify loading, responsiveness, and visual stability from real Chrome users.

The Three Metrics and Their Thresholds

Metric	What It Measures	Good	Needs Improvement	Poor
LCP	Time to render the largest element in the viewport	≤ 2.5s	2.5s–4.0s	> 4.0s
INP	Latency of the slowest interaction during a visit	≤ 200ms	200ms–500ms	> 500ms
CLS	Sum of unexpected layout shifts	≤ 0.1	0.1–0.25	> 0.25

Google evaluates the 75th percentile of your traffic per metric per device type. A page passes only when all three metrics hit "Good" at that percentile. Lab tools like Lighthouse estimate these values, but ranking uses field data from the Chrome User Experience Report (CrUX).

Lab Data vs. Field Data: Use the Right Tool

The single most common mistake is optimizing against a Lighthouse score while your real users experience something different. Lighthouse runs a simulated load on a throttled connection; it cannot measure INP because INP requires real interactions. For an accurate picture, pair lab and field tools.

PageSpeed Insights — shows both CrUX field data (28-day rolling) and a Lighthouse lab run for a single URL.
Search Console's Core Web Vitals report — groups URLs by status across your whole property, ideal for prioritization.
CrUX Dashboard / BigQuery — origin-level historical trends for tracking regressions over months.
The web-vitals JavaScript library — captures real INP, LCP, and CLS from your own users and sends them to your analytics.

Install the web-vitals library and log attribution data (which element caused the LCP, which handler blocked an interaction). This turns vague "our INP is 480ms" reports into "the search autocomplete handler is the bottleneck on mobile."

Fixing LCP

LCP is usually a hero image, a heading, or a large text block. The four contributors are Time to First Byte, resource load delay, resource load time, and element render delay. Attack them in order.

Reduce TTFB with edge caching or a CDN. Ottawa businesses serving Canadian visitors benefit from a CDN with Canadian POPs (Toronto, Montreal) to cut round-trip latency.
Preload the LCP image with fetchpriority="high" and stop lazy-loading anything above the fold.
Serve modern formats (AVIF/WebP) and responsive srcset sizes so mobile devices never download desktop-sized images.
Eliminate render-blocking CSS/JS in the critical path; inline critical CSS and defer the rest.

Fixing INP

INP is a main-thread problem. When JavaScript monopolizes the main thread, the browser cannot paint the next frame after a tap or click. The fixes are about breaking up work, not adding more of it. Yielding to the main thread with scheduler.yield() (or a setTimeout/isInputPending fallback) lets pending interactions run before long tasks finish.

Break long tasks (> 50ms) into smaller chunks and yield between them.
Debounce expensive input handlers and move non-urgent work to requestIdleCallback or a Web Worker.
Trim third-party scripts—tag managers, chat widgets, and A/B testing tools are frequent INP offenders. If you rely on heavy client-side frameworks, review our [JavaScript SEO guide](/javascript-seo-rendering/) for rendering strategies that reduce hydration cost.

Fixing CLS

CLS comes from content that moves after the user has started reading. The fixes are almost always about reserving space in advance.

Set explicit width and height (or aspect-ratio) on all images, video, and iframes.
Reserve slots for ads and embeds with min-height containers so late-loading content does not push the page down.
Preload web fonts and use font-display: optional or size-adjust to avoid layout shifts from font swaps.
Never insert banners or cookie notices above existing content without a reserved placeholder.

~24% Typical reduction in bounce rate teams report after moving an LCP from the "Poor" to the "Good" band on mobile

Are Core Web Vitals a strong ranking factor?

They are a real but modest tiebreaker. Relevance and content quality dominate, but between two comparable pages, the better page experience can win—and poor CWV visibly hurts conversions regardless of ranking.

Why does PageSpeed Insights show no field data for my page?

CrUX needs enough real Chrome traffic to report a URL. Low-traffic pages fall back to origin-level data or show none at all. Use your own RUM via the web-vitals library to fill the gap.

How long after a fix does Search Console update?

CrUX uses a 28-day rolling window, so expect roughly a month before field metrics fully reflect a deployment. Lab tools confirm the fix immediately.

Optimize against field data (CrUX/RUM), not just Lighthouse scores.
LCP is a loading problem, INP is a main-thread problem, CLS is a layout-reservation problem.
INP replaced FID in 2024—audit responsiveness with real interaction data.
A page must hit "Good" on all three metrics at the 75th percentile to pass.

Core Web Vitals are one component of a healthy site. Once your metrics are green, tie them into the broader picture with our [technical SEO guide](/technical-seo-guide/) and make sure crawlers can actually reach your fast pages by reviewing [crawl budget optimization](/crawl-budget-optimization/).