What Are Core Web Vitals (and How to Pass Them)

Google evaluates each metric at the 75th percentile of real-user (field) data collected over the prior 28 days from the Chrome User Experience Report (CrUX). A page passes CWV when all three metrics are in the 'Good' threshold for at least 75 percent of users.

• LCP (Largest Contentful Paint) — time from navigation to when the largest visible content element (usually a hero image or H1) renders. Good: ≤ 2.5s. Needs improvement: 2.5–4.0s. Poor: > 4.0s.
• INP (Interaction to Next Paint) — responsiveness across all user interactions on the page (replaced FID in March 2024). Good: ≤ 200ms. Needs improvement: 200–500ms. Poor: > 500ms.
• CLS (Cumulative Layout Shift) — sum of unexpected layout movement during page load. Good: ≤ 0.1. Needs improvement: 0.1–0.25. Poor: > 0.25.

Google's ranking signal uses field data (real Chrome users) from CrUX, not lab data from synthetic tools. PageSpeed Insights shows both — field data at the top (the actual ranking signal) and lab data below (a synthetic test that runs in a controlled environment). Pages can pass lab tests but fail field tests if real users have slower devices, slower networks, or different interaction patterns than the synthetic test simulates.

Always optimize against field data when possible. Lab data is useful for diagnostics and for new pages without enough field data yet, but the ranking signal only counts what real users experience.

LCP is usually loading-related — the largest visible element (often a hero image) takes too long to render. Highest-leverage fixes:

• Optimize hero images: WebP/AVIF format, correctly sized for the viewport, fetchpriority="high" attribute.
• Eliminate render-blocking resources: defer non-critical CSS and JavaScript, inline critical CSS for above-the-fold content.
• Use a fast CDN with HTTP/2 or HTTP/3, geographic edge nodes near your audience.
• Server-side render or pre-render content where possible — fully client-side React/SPAs typically score worse on LCP.
• Preconnect to required third-party origins (analytics, fonts) and preload critical resources.

INP is usually JavaScript-related — long tasks block the main thread and delay response to user input. Highest-leverage fixes: code-split heavy JavaScript bundles; defer non-critical scripts; break up long tasks into smaller chunks (yield to the main thread); use web workers for expensive computation; avoid synchronous third-party scripts (especially tag managers loading multiple analytics scripts).

CLS is usually layout-related — elements move around as the page loads. Highest-leverage fixes: explicitly set width and height attributes on images and video; reserve space for ads and embeds with min-height; use font-display: optional or font-display: swap with carefully matched fallback fonts to minimize text-shift; never inject content above existing content unless triggered by user action.

Search Console > Core Web Vitals report shows your CWV status across the site, grouped by URL pattern (Good / Needs Improvement / Poor). PageSpeed Insights gives per-URL field and lab data. Chrome DevTools > Performance + Lighthouse for in-browser diagnostics. For ongoing monitoring, the web-vitals JavaScript library lets you collect real-user CWV data and pipe it to your analytics for custom dashboards.