The 5 Core Web Vitals Every Web App Must Optimize

Google's Core Web Vitals are the closest thing we have to an objective measure of user experience on the web. They directly impact search rankings and, more importantly, user satisfaction and conversion rates.

LCP (Largest Contentful Paint) measures loading performance. Target: under 2.5 seconds. The most common culprit: render-blocking resources, unoptimized images, and slow server response times. Fix: use Next.js Image optimization, implement CDN, and eliminate render-blocking CSS/JS.

INP (Interaction to Next Paint) — the successor to FID — measures responsiveness. Target: under 200ms. Long JavaScript tasks block the main thread and kill INP. Fix: code-split aggressively, move heavy computation to Web Workers, and defer non-critical scripts.

CLS (Cumulative Layout Shift) measures visual stability. Target: under 0.1. The classic culprits: images without dimensions, ads injected above content, and web fonts causing FOIT/FOUT. Fix: always specify image dimensions, use `font-display: optional`, and avoid inserting content above existing elements.

TTFB (Time to First Byte) isn't officially a Core Web Vital but heavily influences LCP. Target: under 800ms. Fix: server-side caching, CDN edge caching, and database query optimization.

The tooling you need: Lighthouse CI in your deployment pipeline for regression detection, Chrome UX Report (CrUX) for real-user data, and PageSpeed Insights for actionable recommendations. Monitor continuously — a single bad deploy can tank your Core Web Vitals.