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?
What elements count as CLS?
- 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
- 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
The key is to tackle issues related to each contributing phase.
Images without dimensions
Images with no explicit width/height cause the browser to reflow the page once the image loads and its natural dimensions are known.
Always set width and height attributes on <img> elements. Use CSS aspect-ratio for responsive images.
Web fonts causing FOUT/FOIT
Custom web fonts swapping in after the initial paint push text into new positions.
Use font-display: optional or swap. Preload critical fonts. Subset fonts to reduce load time.
Dynamically injected content
Ads, embeds, or banners inserted above existing content shift everything below them.
Reserve space with min-height on ad slots and embed containers before content loads.
Root cause analysis, not plugin guessing. Baseline from field data or lab — wherever you are.