What Is CLS (Cumulative Layout Shift)? Causes and Fixes

Short answer: Cumulative Layout Shift is a score for how much visible content moves unexpectedly while a page is in use. A score of 0.1 or less at the 75th percentile is considered good. It is caused mostly by images and embeds without reserved space, content inserted above what the visitor is reading, and fonts that change size when they load. The visible symptom is a visitor tapping the wrong thing because the page jumped.

Table of Contents

1. What CLS Measures
2. Thresholds
3. Common Causes
4. Fixes
5. Seeing Shifts in Real Sessions
6. Key Takeaways

What CLS Measures

Each time a visible element moves without the visitor causing it, the browser records a layout shift. Its score combines how much of the viewport was affected with how far things moved. CLS reports the worst burst of shifts during the page's life.

It is a unitless score, not a time. Shifts within half a second of a user's own action, such as tapping a button that expands a panel, are excluded because they are expected.

Thresholds

Measured at the 75th percentile of real visits.

Common Causes

Shifts are worse on mobile, where a narrow screen means any inserted element moves everything.

Fixes

Reserve space for media.

<img src="/product.webp" width="600" height="600" alt="Blue cotton shirt">

With width and height, the browser keeps the right space before the image loads. For responsive containers, use the CSS aspect-ratio property.

Reserve space for anything loaded later. Give ad slots, embeds, and asynchronous blocks a minimum height. A skeleton placeholder of the final size does this (loading states).

Do not insert content above existing content. Overlay banners instead of pushing the page down, or reserve their space in the initial HTML. This applies to cookie banners and sticky bars.

Stabilise fonts. Use a fallback with similar metrics and preload the main font (font loading).

Animate with transform and opacity, which do not trigger layout.

Seeing Shifts in Real Sessions

A CLS score tells you a page is unstable. It does not show you what moved, or what it cost.

Layout shifts leave recognisable traces in behavior:

• Mis-taps. A visitor taps where a button was, and hits something else. They go back immediately.
• Rage clicks shortly after page load.
• A click on an advert or unrelated link, followed by an instant return.
• Scroll corrections, where the reader loses their place and scrolls back up.

In a session recording you can watch the page as it loaded for that visitor and see the element arrive and push the rest down. Because CLS depends on network timing, it often does not reproduce on a fast office connection, which is why field data and recordings matter more here than a lab test.

A practical routine:

1. Find pages with poor CLS in real-user performance data, by device.
2. Open mobile sessions on that page.
3. Watch the first five seconds of several.
4. Note which element arrives late.
5. Reserve its space and re-measure.

The worst case is a shift at the moment of commitment: a "Place order" button that moves as a late banner loads, so the tap lands on "Cancel" or an upsell. On checkout pages, treat any shift as a bug (mobile checkout).

Key Takeaways

• CLS scores unexpected movement; aim for 0.1 or less.
• Reserve space for everything that loads late.
• Never push content down with a late banner.
• Recordings show exactly what moved and what the visitor mis-tapped.

Conclusion

A page that jumps feels broken even when it is fast. Give every late element a reserved place and the problem mostly disappears.

Start free with DeepSync.