Cumulative Layout Shift: The Metric That Measures Annoyance

Of the three Core Web Vitals, Cumulative Layout Shift is the odd one out — it's not really a speed metric. A page can load instantly and still score terribly on CLS if its content keeps rearranging itself after it appears. It's a metric for a specific, familiar kind of frustration: the ground shifting under you while you're trying to read or tap something.

The three usual suspects

Images without reserved dimensions. When a browser doesn't know an image's dimensions in advance, it renders the surrounding content first and then inserts the image once it loads, pushing everything below it down. Specifying width and height (or an aspect-ratio) in the HTML or CSS lets the browser reserve the correct space up front, so nothing has to move once the image arrives.

Web fonts causing a visible swap. If a custom font takes a moment to load, browsers either show invisible text until it's ready (no shift, but a flash of nothing) or show a fallback font immediately and swap it out once the real font loads (visible shift, since different fonts take up different amounts of space for the same text). Preloading key fonts and choosing a fallback with similar metrics both reduce how jarring this swap is.

Content injected above existing content. Ads, embedded widgets, cookie banners, and promotional bars are the classic culprits — anything that inserts itself into the page after the initial render, especially above the fold, shoves everything below it downward at an unpredictable moment. The fix is almost always the same: reserve space for that element from the start, even before its content has loaded, rather than letting it appear and displace things.

Why this one disproportionately affects mobile and e-commerce

Layout shift is more noticeable on mobile, where screens are smaller and a shift is more likely to move the exact element someone was about to tap. It's also disproportionately costly on e-commerce and lead-gen sites specifically, because the classic CLS-driven mis-tap — hitting an ad instead of an "Add to Cart" button because it moved at the last second — directly costs a conversion, not just an annoyance.