What is Cumulative Layout Shift (CLS) and what causes it?

Cumulative Layout Shift measures how much visible page content unexpectedly moves around while a visitor is using the page, scored as a unitless number where 0.1 or less — assessed at the 75th percentile of real page loads — counts as good, and anything over 0.25 counts as poor (web.dev, "Cumulative Layout Shift (CLS)," verified live August 18, 2026).

The qualifier: CLS only counts unexpected movement. Content that moves within half a second of the visitor's own tap or click is excluded, because responding to input is what pages are supposed to do. What CLS punishes is the page rearranging itself on its own — the paragraph you were reading dropping out of view, or the button you were about to tap becoming a different button. It is the visual-stability member of the Core Web Vitals, alongside LCP for loading and INP for responsiveness.

What actually causes layout shift

• Images and videos without dimensions: the browser reserves no space, so content below jumps down when the file arrives. The fix is explicit width/height (or CSS aspect-ratio) on every image — web.dev lists this first.
• Ads, embeds, and iframes that size themselves late: the classic mid-article jump. The fix is a reserved container sized before the embed loads.
• Web fonts swapping in: text renders in a fallback font, then reflows when the web font arrives at a different size. Metric-matched fallbacks and font-display tuning shrink the shift.
• Content injected above existing content: banners, notices, and widgets inserted into the document flow after render — anything added without the visitor asking for it.
• Animating layout properties: moving elements with top/left/width instead of CSS transform forces re-layout; web.dev's guidance is to animate with transform.

CLS is the vital with the least excuse, because it is fully within the developer's control — no server, no network, no visitor hardware involved. It is why we treat 0, not 0.1, as the build target: our 15-page agency rebuild measures a CLS of 0 site-wide, and our production client builds measure 99-100 on mobile partly because layout stability is designed in — dimensions on every image, space reserved for every late-loading element — rather than patched after launch (SAA build measurements, July-August 2026).