How to Fix Cumulative Layout Shift (CLS)

What is CLS?

Cumulative Layout Shift measures the visual stability of a page — how much its content jumps around while it loads. It is one of the three Core Web Vitals, and the most viscerally annoying: it is the reason you tap "cancel" and hit "confirm" because a button slid under your thumb.

Technically, each shift is scored by how much of the viewport moved and how far, and CLS reports the largest burst of those shifts during the page's life. It is unitless — 0.1 is a target, not a tenth of a second — which trips people up the first time they read a report.

What is a good CLS score?

The bands are 0.1 or less for good, 0.1 to 0.25 for needs improvement, and above 0.25 for poor, taken at the 75th percentile of visits.

CLS at 75th percentile	Rating
≤ 0.1	Good
0.1 – 0.25	Needs improvement
> 0.25	Poor

Because it is cumulative across the whole visit, a page can pass on first paint and still fail — a late ad, a lazy image scrolling into view, or a cookie banner that pushes everything down all add to the score after the initial load.

What causes layout shift?

Almost every layout shift traces to one of a few habits:

• Images and video without dimensions. With no width/height or aspect-ratio, the browser reserves no space, then reflows everything when the media arrives.
• Ads, embeds, and iframes. Third-party content that loads into an unsized container shoves the page down when it appears.
• Content injected above existing content. Banners, notices, or "related" strips inserted at the top push the article the reader is already looking at.
• Web fonts. When a fallback font swaps for a webfont of a different size, the text reflows — the flash-of-unstyled-text shift.
• Animations that use layout properties. Animating top or height instead of transform moves surrounding elements every frame.

How do you fix CLS?

Reserve the space, every time:

• Always set image and video dimensions. Explicit width and height (or a CSS aspect-ratio) let the browser hold the exact box before the file loads. This single habit fixes most CLS problems — and it is the same discipline that helps Largest Contentful Paint.
• Reserve space for ads and embeds. Give every slot a fixed minimum height so it occupies its area whether or not anything fills it. That is exactly how this site keeps article layout shift at zero.
• Never insert content above existing content unless it is in response to a user action. If you must show a banner, reserve its height from the start.
• Reduce font swap. Preload the primary font, use font-display: swap, and match the fallback's metrics with size-adjust so the swap does not resize text.
• Animate with transform. Use transform and opacity for motion; they are composited and do not shift neighbors.

Confirm the result in the field, not just the lab — a shift caused by a slow third-party script may only show up on real connections.

Does CLS count shifts the user causes?

No. Google excludes any layout shift that happens within 500 milliseconds of a user interaction, treating it as expected — an accordion you opened, a "load more" you clicked. CLS only counts unexpected movement, the kind that happens while you are reading and did nothing.

That exclusion is why the fix is almost always about the load sequence, not about interactions. Hold space for everything that arrives on its own, and let user-triggered changes move freely.

How does CLS fit with LCP and INP?

CLS is the visual-stability leg of the Core Web Vitals tripod, alongside LCP for loading and INP for responsiveness. They score independently, so stability is its own job — a fast, responsive page can still lurch as it loads.

The good news is that CLS is often the cheapest vital to fix: set dimensions, reserve space, and most of the score disappears. For more on building solid pages, see the Web Development tag and the Technology section.