Design & developmentPillar guide
Core Web Vitals in practice
Three numbers that measure real user experience, what breaks them, and which fixes actually move them.
Core Web Vitals are three numbers Google publishes to describe real user experience. This guide covers what each one measures, what breaks it, and which fixes move it.
The three numbers
LCP — when the largest content element is painted. Good: under 2.5 s.
CLS — how much the layout shifts unexpectedly. Good: under 0.1.
INP — the delay before the page responds to interaction. Good: under 200 ms.
All three are measured at the 75th percentile of real visits, not in a single lab run on a developer laptop.
What actually fixes LCP
Send the above-the-fold image eagerly, with high priority.
Serve a modern format at several widths.
Preload the subset font and use font-display: swap.
Always write width and height so the layout cannot shift.
Any image the visitor sees before scrolling is part of load time; any image they do not see should not be.
