What Is Cumulative Layout Shift (CLS)?

How Cumulative Layout Shift Works

Cumulative Layout Shift measures visual stability — whether the things you’re looking at stay where they were, or lurch around as the page finishes loading. Everyone has tapped a link only to have an image load above it, push everything down, and land the tap on the wrong thing. CLS turns that frustration into a number.

The browser watches for layout shifts: any time a visible element changes its start position between two rendered frames. Crucially, only unexpected shifts count. If the movement happens within 500 milliseconds of a user interaction — you clicked “expand” and the accordion opened — it is treated as expected and excluded. CLS is about content that moves on its own, without the user asking.

Because it is a Core Web Vital, CLS is measured on real Chrome users and reported at the 75th percentile. Its good threshold is 0.1 or less, needs-improvement runs to 0.25, and anything above 0.25 is poor. Unlike its two siblings, CLS is unitless — it is a score, not a stopwatch.

How the Score Is Calculated

Each individual layout shift is scored as:

layout shift score = impact fraction × distance fraction

• Impact fraction is the proportion of the viewport occupied by the unstable elements, combining where they were and where they moved to.
• Distance fraction is the greatest distance any unstable element travelled, divided by the viewport’s largest dimension (height or width).

Google’s own worked figure: an element that takes up 50% of the viewport and shifts down by 14% of the viewport height scores 0.5 × 0.14 = 0.07.

The scores don’t simply add up across the whole page, though. CLS uses session windows. A session window is a burst of shifts where each is less than 1 second from the last, and the whole window is capped at 5 seconds. The page’s CLS is the score of its worst session window — the single largest burst of instability — not the lifetime sum. This design stops long-lived pages and infinite scrolls from accumulating an unfairly large score just by existing for a long time.

What Causes Layout Shifts

The offenders are consistent and, once you know them, easy to spot:

• Media without dimensions — images, videos, and iframes with no width/height or aspect-ratio, so the browser reserves zero space and reflows when they load.
• Dynamically injected content — cookie banners, promo bars, newsletter prompts, or ad slots inserted above existing content after render.
• Web fonts — a fallback font swapping to a web font of different metrics, reflowing every line of text (FOUT/FOIT).
• Actions awaiting a network response that update the UI without reserving space first.

Example of Cumulative Layout Shift

Take the exact scenario in Google’s CLS documentation. A page renders a block of text, and then a banner image loads at the top. The image occupies a large share of the screen and pushes the text down. Using web.dev’s own numbers, the moved content covers an impact fraction of 0.75 of the viewport, and it shifts downward by a distance fraction of 0.25. The layout shift score is 0.75 × 0.25 = 0.1875 — comfortably into the poor band on a single shift.

The documented fix is not to move the text; it’s to reserve the banner’s space before it loads. Declaring the image’s width and height (or a CSS aspect-ratio) makes the browser lay out an empty box of the right size immediately, so when the image arrives it paints inside that box and nothing below it moves. That one change drops the shift score to essentially zero, because there is no longer any unexpected movement to score. Same image, same page weight, same load time — the difference is entirely in whether space was reserved.

The lesson generalizes to every CLS problem, and it is almost the opposite of how loading metrics work. LCP and INP reward doing work faster; CLS rewards reserving space in advance so that however fast or slow content loads, it never displaces what’s already visible. A slow page with every slot reserved can score a perfect CLS, and a fast page that injects a banner late can fail it. The discipline is knowing the final dimensions of everything up front — images, ads, embeds, fonts — and committing that space before the content shows up.

Cumulative Layout Shift and the Other Core Web Vitals

CLS completes the trio of Core Web Vitals alongside Largest Contentful Paint and Interaction to Next Paint. It’s the one that most often improves as a side effect of fixing the others: adding width and height to your hero image both reserves its space (helping CLS) and lets the browser plan its download better (helping LCP). The common thread across all three is predictability — a page that declares what it’s going to show, and where, before it shows it. Get that habit right and stability tends to come for free.

Frequently Asked Questions

The Bottom Line

Cumulative Layout Shift grades whether a page holds still while it loads, or whether buttons and text jump under your finger as images and ads pop in. It scores every unexpected move by how much of the screen shifted and how far, then reports the worst burst. Keep it at or below 0.1 by reserving space for everything before it arrives on screen.