Cumulative Layout Shift

Why it matters

A high CLS score is what causes a visitor to tap the wrong button because content shifted a moment before they touched the screen, a common and infuriating mobile experience, most often caused by an image or an ad loading without reserved space and pushing everything below it downward. It also erodes trust in a checkout or form specifically, since a shift that causes a mis-tap on a payment button reads to the visitor as the site being broken or untrustworthy, not just clumsy. It also compounds with slow-loading ads or embeds specifically, since third-party content is the most common source of layout shift precisely because its final size is not known until it actually loads.

What goes wrong when it's handled badly

The typical cause is an image, embed or ad with no explicit width and height set in the code, so the browser has no way to reserve its space before it loads. A cookie banner or a promotional bar that injects itself after the page has already rendered, shoving the content below it down, is one of the most common and most annoying real-world causes of layout shift. A concrete example is a web font that loads after the page has already rendered with a fallback font, causing every line of text to reflow and shift the moment the real font finishes downloading. Reserving space with a fixed aspect ratio container before any image or embed loads, rather than letting the layout collapse until content arrives, removes this entire class of shift. Testing on an actual mid-range mobile device, not only a desktop browser, is what catches shift that a fast machine hides.