Full Definition
Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability — specifically, how much a page's layout shifts during loading. It's quantified by a score based on how much content shifts and how far it moves. CLS thresholds: - **Good**: Below 0.1 - **Needs improvement**: 0.1 to 0.25 - **Poor**: Above 0.25 You've experienced poor CLS when: you're reading an article on mobile, an ad loads above the text, and the whole page jumps — causing you to accidentally tap the ad instead of the link you were going for. That's a CLS problem. Common causes of high CLS: **Images without defined dimensions**: If `<img>` tags don't have `width` and `height` attributes, the browser doesn't reserve space for them. When the image loads, it pushes everything down. **Ads and embeds without reserved space**: Ad units that load after the page often inject content that shoves everything else around. **Web fonts loading late**: If your custom font loads after the fallback system font, text can shift as glyphs change size. **Dynamically injected content**: Popups, banners, or cookie notices that slide in above existing content. Fixes are generally straightforward: always specify `width` and `height` on images, reserve space for ad slots with CSS, and use `font-display: optional` to prevent font-swap shifts. Actionable tip: In Chrome DevTools, run a Lighthouse report and look at the CLS value. Click through to see which specific elements are causing shifts — Chrome highlights the offending elements in the filmstrip view.