TL;DR
Cumulative Layout Shift (CLS) is a Core Web Vital that measures the visual stability of a page by summing the layout shift scores of unexpected movements of visible elements during the page's lifetime.
What is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vital that measures the visual stability of a page by summing the layout shift scores of unexpected movements of visible elements during the page's lifetime.
Read our guide: Core Web Vitals optimization. Or work with us through our done-for-you website speed optimization services.
CLS Thresholds & Benchmarks
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| CLS | ≤ 0.1 | 0.1, 0.25 | > 0.25 |
How CLS is Measured
CLS is reported as a unitless score computed from the impact fraction and distance fraction of each shift, captured via the Layout Instability API and aggregated in CrUX using a session-window model.
How to Fix & Optimize
Most CLS problems are fixed with a small, disciplined checklist:
- Set explicit width and height on all images and embeds (or use CSS `aspect-ratio`), so the browser reserves the correct space before the resource loads. Missing image dimensions are the single most common CLS cause.
- Reserve space for ads, banners, and dynamic widgets with a `min-height` matching the expected size, so injected content does not push page content down when it arrives.
- Use `font-display: swap` with size-adjusted fallback fonts (`size-adjust`, `ascent-override`, `descent-override` on the fallback `@font-face`) so text does not reflow when the webfont finally loads.
- Never inject content above existing content. Cookie banners, promo bars, and app-install prompts should push down from the top of the viewport as an overlay, or reserve their space in the layout from the initial paint.
- Animate with `transform` and `opacity`, not layout properties. Changes to `width`, `height`, `top`, `left`, or `margin` trigger layout and can cause shifts; `transform` runs on the compositor and cannot.