Core Web Vitals & Performance Metrics

Core Web Vitals are a set of three metrics that Google uses to measure the real-world user experience of web pages. Since 2021, they are a confirmed Google Search ranking factor, making them important for both user experience and SEO. Understanding what they measure and how to improve them is essential knowledge for frontend developers.

LCP (Largest Contentful Paint)

LCP measures loading performance by timing when the largest visible content element (image, video, or text block) finishes rendering in the viewport. Good: under 2.5 seconds. Poor: over 4.0 seconds.

Common LCP elements include hero images, featured videos, and large heading text. To improve LCP: optimize and compress the LCP image, use fetchpriority="high" on the LCP element, preload critical resources with <link rel="preload">, eliminate render-blocking CSS and JavaScript, and use a CDN for faster delivery. Server response time (TTFB) directly impacts LCP — if the server takes 2 seconds to respond, LCP cannot be under 2 seconds.

INP (Interaction to Next Paint)

INP replaced FID (First Input Delay) in March 2024 as the responsiveness metric. While FID only measured the delay of the first interaction, INP measures the latency of all interactions throughout the page's lifetime and reports the worst (or near-worst, at the 98th percentile). Good: under 200ms. Poor: over 500ms.

INP measures the full cycle: input delay (time before the event handler runs) + processing time (event handler execution) + presentation delay (time until the next frame is painted). To improve INP: break up long tasks (over 50ms) using requestAnimationFrame or scheduler.yield(), minimize main thread work during interactions, avoid layout thrashing, and use content-visibility: auto for off-screen content.

CLS (Cumulative Layout Shift)

CLS measures visual stability by summing unexpected layout shifts that occur during the page's lifetime. A layout shift happens when a visible element changes position without user interaction. Good: under 0.1. Poor: over 0.25.

Common causes of CLS: images without width/height attributes, dynamically injected content (ads, banners, cookie notices), web fonts causing Flash of Unstyled Text (FOUT), and late-loading CSS. To improve CLS: always set explicit dimensions on images and videos, reserve space for dynamic content with min-height or aspect-ratio, use font-display: swap with size-adjust, and avoid inserting content above existing content.

Measurement Tools

Lab tools (synthetic, controlled environment): Lighthouse (in Chrome DevTools or CI), PageSpeed Insights (lab + field data), and WebPageTest provide detailed diagnostics and recommendations.

Field tools (real user data): Chrome User Experience Report (CrUX) provides aggregated real-user metrics, the web-vitals JavaScript library captures metrics in your own analytics, and Google Search Console shows Core Web Vitals status for your pages.

The key difference: lab tools measure under ideal conditions and are useful for debugging. Field tools measure actual user experiences across diverse devices and networks, and are what Google uses for ranking.

The web-vitals Library

Google's web-vitals library (under 2KB) captures all Core Web Vitals in production:

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);  // { name: 'LCP', value: 1234, rating: 'good' }
onINP(console.log);  // { name: 'INP', value: 89, rating: 'good' }
onCLS(console.log);  // { name: 'CLS', value: 0.05, rating: 'good' }

Send these metrics to your analytics service to track real-user performance over time.

Key Interview Distinction

LCP measures loading (is the main content visible?), INP measures interactivity (does the page respond quickly to all interactions?), and CLS measures stability (does content shift unexpectedly?). Together they capture the three dimensions of user experience that matter most.