CLS
Cumulative Layout Shift
Total unexpected movement of visible page content during the entire lifespan of the page.
- Good: ≤ 0.1
- Needs improvement: ≤ 0.25
- Poor: > 0.25
CLS0.000.18
The page rendersThe page rendersThe page looks ready…Content below was pushed down: layout shift
What is CLS?
Cumulative Layout Shift (CLS) is a unitless score that measures visual stability. It quantifies how much visible content unexpectedly shifts during the lifespan of a page. Each layout shift is scored by the fraction of the viewport affected multiplied by the distance content moved.
What problem does it solve?
Unexpected layout shifts cause users to lose their reading position, click the wrong element, or experience confusion. CLS captures this frustration metric in a way that earlier load-based metrics could not.
What is a good CLS score?
Good
Exceptional — no perceptible shift.
What causes layout shifts?
Considered
- Any visible DOM element that changes its start position between frames
- Elements that grow in size, pushing other elements out of place
- Late-loading images with no reserved dimensions
- Web font swaps causing text to reflow into different space
- Dynamically injected banners, ads, or cookie notices above existing content
Excluded
- Layout shifts within 500ms of a user interaction (considered intentional)
- Shifts caused by new content added below the visible fold
- Layout shifts inside iframes (they do not affect the parent page score)
- Expanding or collapsing elements explicitly triggered by a user click
How to improve CLS
Most layout shifts fall into a small number of fixable patterns.
01
Images without dimensions
Images with no explicit width/height cause the browser to reflow the page once the image loads.
Fix Always set width and height attributes on img elements. Use CSS aspect-ratio for responsive images.
02
Web fonts causing FOUT/FOIT
Custom web fonts swapping in after the initial paint push text into new positions.
Fix Use font-display: optional or swap. Preload critical fonts. Subset fonts to reduce load time.
03
Dynamically injected content
Ads, embeds, or banners inserted above existing content shift everything below them.
Fix Reserve space with min-height on ad slots and embed containers before content loads.
Need help fixing your CLS?
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.
Start an Engagement