Core Web Vitals: LCP ≤2.5s, INP ≤200ms, CLS ≤0.1 at 75th Percentile
Target LCP under 2.5s, INP under 200ms, and CLS under 0.1 at the 75th percentile of page loads across devices to deliver great loading, interactivity, and visual stability—measure with web-vitals JS library and Google field tools like CrUX.
Prioritize These Three Metrics for User Experience
Core Web Vitals simplify performance measurement by focusing on loading (Largest Contentful Paint or LCP), interactivity (Interaction to Next Paint or INP), and visual stability (Cumulative Layout Shift or CLS). Hit LCP within 2.5 seconds of page load start to avoid frustrating waits during content rendering. Keep INP at 200 milliseconds or less so interactions like clicks respond instantly without delays from long tasks. Maintain CLS at 0.1 or below to prevent unexpected layout shifts that disrupt reading or tapping. Assess success at the 75th percentile of real-user page loads, segmented by mobile and desktop, ensuring 75% of users meet thresholds—a page passes if all three metrics comply.
These field-measurable, user-centric outcomes outperform lab proxies because they capture device, network, and interaction variances. Supporting metrics like TTFB, FCP, and TBT diagnose issues (e.g., slow servers for LCP, render-blocking resources for FCP) but aren't Core Vitals since they're not always field-based or outcome-focused.
Track Metrics Through Experimental-to-Stable Lifecycle
New metrics start experimental to iterate definitions and gather feedback—INP replaced FID here after addressing runtime gaps. They advance to pending for 6+ months of ecosystem adaptation, then stabilize as Core Vitals with ≤1 annual change, announced via docs and changelog. Current status: LCP, INP, CLS all stable. This predictability lets you adopt confidently without constant retooling.
Instrument and Optimize with Proven Tools
Use Chrome User Experience Report (CrUX) for anonymized real-user data powering PageSpeed Insights, Search Console Core Web Vitals report, and DevTools—supports all three metrics without setup. For per-page diagnostics, instrument your own monitoring: import web-vitals library and send metrics via onLCP, onINP, onCLS to analytics, using navigator.sendBeacon for reliability:
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body))
|| fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
Aggregate to check 75th percentile thresholds. Lab-test with DevTools (all metrics) or Lighthouse (LCP/CLS; use TBT for INP proxy) during dev to catch regressions pre-release, but prioritize field data for production truth. Optimize via targeted guides: reduce LCP with faster servers/resources, INP by breaking long tasks, CLS by reserving ad/font space—Chrome's top picks yield biggest gains.