Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is the Core Web Vitals metric for visual stability: how much visible content unexpectedly moves while the page loads and runs. You know the feeling — you go to tap a button and an ad loads above it, shoving the button down so you tap something else. Good is a CLS score of 0.1 or less; over 0.25 is poor.

How is the CLS score calculated?

Every time an element moves without the user causing it, the browser records a layout shift scored by two factors multiplied together: how much of the viewport the moving content occupied, and how far it traveled. CLS is the worst burst of shifts during the page's lifetime (shifts clustered within a few seconds count together).

Two details matter in practice. Shifts within 500ms of a user interaction don't count — expanding an accordion is fine. And CLS is measured for the whole visit, not just initial load — a banner that slides in at the 30-second mark still tanks the score.

What causes layout shift, and how do you fix it?

Nearly every CLS failure traces back to the same short list — content inserted without reserved space:

• Images and videos without dimensions. The browser can't reserve space, so content jumps when the file arrives. Fix: always set width/height (or use next/image, which enforces this and reserves the space automatically).
• Late-loading embeds, ads, and banners. Cookie bars, chat widgets, YouTube embeds, and announcement banners that push content down. Fix: reserve a fixed slot, or overlay instead of inserting.
• Web-font swaps. The fallback font renders, then the web font arrives with different metrics and every paragraph reflows. Fix: font-display strategies and metric-matched fallbacks — next/font does this matching for you.
• Content injected above existing content — "related posts" blocks, dynamic promos. Fix: insert below the fold or into pre-reserved space.

There's also an animation-shaped trap: moving elements with layout properties (top, margin) can register as shifts, while the same motion on transform doesn't. It's one more reason compositor-friendly animation is a Core Web Vitals concern, not just an aesthetic one.

FAQ

What is a good CLS score?

0.1 or less at the 75th percentile of real visits is "good," 0.1–0.25 "needs improvement," and above 0.25 "poor." Note it's a unitless score — a product of area moved and distance moved — not a time or pixel count.

Why does my CLS differ between mobile and desktop?

Because the same shift is proportionally bigger on a small screen: a 100px jump is a third of a phone viewport but a tenth of a desktop one, and mobile layouts stack content so shifts cascade further. Fix mobile first; the desktop score usually follows.

Does CLS affect SEO?

Yes — as one of the three Core Web Vitals it feeds Google's page experience signals, with the same tie-breaker weight as LCP and INP. It also has an outsized effect on conversion trust: a form that jumps while someone is filling it is how you lose a lead that was already convinced.