Measuring Visual Stability
Have you ever been about to tap a link on your phone, and suddenly an ad loads above it, pushing everything down, and you tap the wrong thing? Or been reading an article when the text suddenly jumps down because an image above it finished loading? That is a layout shift — and it's one of the most frustrating experiences on the web.
Cumulative Layout Shift (CLS) measures the total amount of unexpected layout movement that occurs during the entire lifespan of a page. Unlike LCP and INP, it is not a time measurement. It is a unitless score calculated by multiplying two factors for each shift: the impact fraction (how much of the viewport moved) and the distance fraction (how far elements moved). These scores are summed across all unexpected shifts.
Thresholds:
- ✅ Good: 0.1 or less
- ⚠️ Needs Improvement: 0.1 – 0.25
- ❌ Poor: More than 0.25
Common causes of poor CLS:
- Images without explicit width and height attributes — the browser doesn't reserve space until the image loads
- Ads, embeds, or iframes injected into the page without reserved dimensions
- Web fonts causing a "flash of unstyled text" (FOUT) that shifts surrounding content when the font loads
- Content dynamically injected above existing content (e.g., cookie banners, notification bars)
The fix is almost always the same: reserve space in advance. Set explicit dimensions on images and media. Give ad slots a fixed minimum height. Use CSS aspect-ratio for responsive elements.