Core Web Vitals in 2026: LCP, INP, and CLS Explained
Core Web Vitals are three Google metrics that measure real-world user experience: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). They are official ranking factors — and the easiest way to lose them is to ignore them.
What are Core Web Vitals?
Core Web Vitals are three Google metrics that capture loading, interactivity, and visual stability. As of March 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID), so the modern trio is LCP, INP, and CLS.
LCP — Largest Contentful Paint
LCP measures how quickly the biggest above-the-fold element (usually the hero image or H1) becomes visible. Good: under 2.5 seconds. Poor: over 4 seconds.
How to fix poor LCP
- Use next/image with priority on the hero image
- Preconnect to your image CDN
- Serve AVIF or WebP instead of JPEG/PNG
- Stream HTML with React Server Components
- Cache at the edge with Vercel or Cloudflare
INP — Interaction to Next Paint
INP measures the latency between a user interaction (click, tap, key press) and the next paint. Good: under 200ms. Poor: over 500ms. INP is the metric most often hurt by heavy third-party scripts.
How to fix poor INP
- Audit third-party scripts (analytics, chat, ads)
- Use next/script with strategy="lazyOnload"
- Break long tasks with React 18 transitions
- Move heavy work to web workers
CLS — Cumulative Layout Shift
CLS measures how much elements unexpectedly jump around the page. Good: under 0.1. Poor: over 0.25. The usual suspects are images without dimensions and dynamically injected ads or banners.
How to fix poor CLS
- Always set width and height on images
- Reserve space for ads and embeds
- Avoid inserting content above existing content
- Use font-display: swap with a fallback metric
Need help hitting all three thresholds?
See our performance services