CLS (Cumulative Layout Shift): When a Page Jumps While Loading
CLS measures how much the page visibly jumps while it loads. Learn what causes the shifts and how to keep them under the threshold.
Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much a page's content moves around unexpectedly while it loads.
What CLS Measures
When images load late, ads appear, or fonts swap, elements move and users click the wrong thing. CLS scores those unexpected shifts; lower is better.
The Good Threshold
- Good: 0.1 or less.
- Needs improvement: up to 0.25.
- Poor: more than 0.25.
CLS is judged at the 75th percentile of real sessions.
What Causes Layout Shifts
- Images without declared dimensions.
- Ads and embeds that load after the text.
- Web font swaps that change text size.
- Banners or pop-ups injected above the content.
- Animations that move layout properties.
How to Improve CLS
- Set width and height on every image.
- Reserve fixed or minimum sizes for ad slots.
- Preload fonts and match fallback metrics.
- Insert dynamic content in reserved space.
- Animate with transform and opacity, not layout properties.
The change: an article with an embedded video.
The setup: the video container is given a fixed aspect ratio.
The reading: the text no longer jumps when the video loads.
Why it works: the browser reserves the space before the video arrives.
Quick Tip
The single highest-impact fix is reserving space. Give every image, video, and ad a size before it loads.
Frequently Asked Questions
CLS, Bottom Line
CLS is the metric users feel as frustration.
Reserve the space, load things predictably, and the page stops jumping.