Core Web Vitals: LCP, CLS and INP
Google's three user-experience metrics measure loading, visual stability and responsiveness. Learn what each means, the thresholds, and how to improve them.
Core Web Vitals are three metrics Google uses to quantify real user experience: how fast the main content loads, how stable the layout is, and how quickly the page responds to input. They're a ranking factor, but more importantly they track things users actually feel.
LCP — Largest Contentful Paint
How long until the largest visible element (usually the hero image or headline) is rendered. Aim for under 2.5 seconds. Improve it by speeding up the server response, preloading the LCP image or font, not lazy-loading the hero, and removing render-blocking resources.
CLS — Cumulative Layout Shift
How much the page jumps around as it loads. Aim for under 0.1. The usual culprits are images without dimensions, ads or embeds that push content down, and web fonts that reflow text. Reserve space for anything that loads late.
INP — Interaction to Next Paint
How quickly the page responds to taps, clicks and key presses across the whole visit. Aim for under 200 milliseconds. It's usually hurt by long JavaScript tasks blocking the main thread — break up heavy work, defer non-critical scripts, and ship less JavaScript.
How to fix it
- LCP: preload the hero image/font, cut render-blocking CSS/JS, speed up TTFB.
- CLS: set width/height on media, reserve space for late content, preload fonts with font-display: swap.
- INP: split long tasks, defer non-critical JS, ship less JavaScript overall.
- Measure in the field (Search Console / CrUX), not just the lab, and re-check after each change.
Glossary
- CLS
- Cumulative Layout Shift — a score of how much visible content moves unexpectedly during load.
- INP
- Interaction to Next Paint — responsiveness: the delay between a user interaction and the next visual update.
- TTFB
- Time To First Byte — how long the server takes to start responding.