# Core Web Vitals Core Web Vitals are a set of metrics defined by Google that measure real-world user experience on the web. They focus on three aspects of the user experience: loading, interactivity, and visual stability. ## Metrics - **Largest Contentful Paint (LCP)** — Measures loading performance. Reports the render time of the largest image or text block visible in the viewport. Target: ≤ 2.5 seconds - **Interaction to Next Paint (INP)** — Measures interactivity. Observes the latency of all click, tap, and keyboard interactions throughout the page lifecycle, reporting the worst (or near-worst) value. Target: ≤ 200 milliseconds - **Cumulative Layout Shift (CLS)** — Measures visual stability. Quantifies how much the page layout shifts unexpectedly during its lifetime. Target: ≤ 0.1 ## Why They Matter Core Web Vitals are a ranking signal in Google Search. Poor scores hurt [[Search Engine Optimization (SEO)]] and correlate with higher bounce rates. They also serve as a proxy for overall [[Web Performance]] — if these three metrics are good, the page likely feels fast and stable to users. ## Measurement Tools - **Chrome DevTools** — Performance panel and Lighthouse audit - **PageSpeed Insights** — Lab + field data from the Chrome User Experience Report (CrUX) - **Web Vitals [[JavaScript]] library** — `web-vitals` npm package for real-user monitoring (RUM) - **Search Console** — Core Web Vitals report showing field data across the site ## Optimization Strategies - **LCP**: Optimize critical rendering path, preload key resources, use responsive images, minimize render-blocking CSS/JS - **INP**: Break up long tasks, use `requestIdleCallback`, defer non-essential JS, keep event handlers fast - **CLS**: Set explicit dimensions on images/embeds, avoid injecting content above existing content, use CSS `contain-intrinsic-size` ## References - https://web.dev/vitals/ ## Related - [[Web Performance]] - [[Search Engine Optimization (SEO)]] - [[Accessibility (a11y)]] - [[JavaScript]]