Understanding Cumulative Layout Shift (CLS): A Comprehensive Guide

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) measures how much a page’s content unexpectedly moves around while it loads, the annoying jumps where a button shifts just as you go to tap it. It’s one of Google’s three Core Web Vitals, capturing visual stability, and a good CLS is 0.1 or less, measured at the 75th percentile of real visits (web.dev). Unlike loading or responsiveness, CLS is about whether the page stays put as it assembles, which is a surprisingly common source of frustration.

Key Takeaways

• CLS measures unexpected layout movement as a page loads; good is 0.1 or less (web.dev).
• It’s a score, not a time: it reflects how much content shifts and how far.
• The usual causes: images/ads/embeds without set dimensions, content injected above existing content, and late-loading web fonts.
• The fix is reserving space for everything before it loads, so nothing has to push other content aside.

CLS is the most overlooked of the three Core Web Vitals because, unlike a slow page, layout shift is easy to stop noticing on your own fast connection where everything loads at once. But for real users on slower connections, content arrives in stages, and if you haven’t reserved space for it, the page lurches. This guide explains what CLS is, what causes the shifts, and how to eliminate them, as one metric in our Core Web Vitals beginner’s guide.

The table below maps the common causes of poor CLS to their fixes.

Why does CLS matter?

CLS matters because layout shifts actively frustrate users and cause real mistakes, like tapping the wrong button when the page jumps. A high CLS makes a site feel unstable and unprofessional, and it can lead to costly errors: a user trying to tap “cancel” who hits “confirm” because an ad loaded and shoved the buttons down. That erosion of trust and control is exactly what the metric is designed to catch.

It also counts for search. CLS is one of the Core Web Vitals that make up Google’s page experience signals, which its core ranking systems are designed to reward (web.dev). A poor CLS weakens that signal, so visual instability can quietly work against your rankings as well as your users, while a stable page supports both.

What makes CLS worth attention is that it’s often the easiest Core Web Vital to fix and the most overlooked. Many sites pass LCP and INP but fail CLS simply because no one reserved space for images, ads, or fonts. Once you know the causes, the fixes are usually straightforward and low-risk, making CLS a high-return metric to address, the kind of detail our guide to improving Core Web Vitals covers alongside the other two.

What is Google’s standard guidance on CLS?

Google’s official guidance sets a clear standard for what counts as good: a CLS of 0.1 or less, measured at the 75th percentile of real page loads across mobile and desktop (web.dev). The thresholds are fixed and worth committing to memory.

It also helps to know how the score is calculated, because it explains why some shifts hurt more than others. Each unexpected shift’s score is its impact fraction (how much of the visible screen moved) multiplied by its distance fraction (how far it moved), and CLS reports the largest burst of shifts grouped into a session window rather than simply adding every shift over the whole visit (web.dev). Crucially, shifts that happen within 500 milliseconds of a user action are treated as expected and excluded, so opening a menu or expanding a section doesn’t count against you. The standard recommendation that follows from all this is the one this guide is built around: reserve space for anything that loads or resizes after the initial render, so no unexpected shift is ever scored in the first place.

What causes layout shifts?

Layout shifts are caused by content that loads or changes size after the page has started rendering, without space reserved for it, so it pushes the surrounding content. There are a few classic culprits, and most pages with poor CLS have one or more of them.

The most common is images without dimensions. If an image has no width and height (or aspect-ratio) specified, the browser doesn’t know how much space to leave, so when the image loads it shoves everything below it down. Ads, embeds, and iframes cause the same problem at larger scale, since they often load late and at unpredictable sizes, and if they appear in an unreserved slot, the whole layout jumps.

Two more causes are subtler. Content injected above existing content, a cookie banner, a notification bar, or dynamically loaded content that appears at the top, pushes everything down after the user has already started reading. And web fonts can shift text: when a custom font loads and replaces the fallback, differences in size and spacing can reflow the text (the “flash of unstyled/invisible text”). Identifying which of these affects your page, using the layout-shift data in PageSpeed Insights, tells you what to fix.

How do you improve CLS?

You improve CLS by reserving space for everything before it loads, so nothing has to push other content aside. The principle is simple: if the browser knows how much room each element will need, it lays the page out correctly the first time and nothing jumps. The fixes follow directly from the causes.

1. Set dimensions on images and video. Always specify width and height attributes, or use the CSS aspect-ratio property, so the browser reserves the right space before the media loads. This single step eliminates the most common cause of CLS.
2. Reserve space for ads, embeds, and iframes. Give them a fixed-size container so that when they load (often late and variably), they fill a slot rather than displacing content.
3. Avoid injecting content above existing content. Don’t push the page down with late-loading banners or notifications; if you must, reserve space for them in advance.
4. Handle fonts carefully. Preload key fonts and use an appropriate font-display value so the swap from fallback to custom font doesn’t reflow the layout.

Test after each change in PageSpeed Insights and confirm with the field data in Search Console, since that’s what Google assesses. Because the causes of CLS are specific and the fixes are well-defined, it’s often the quickest Core Web Vital to move into the good range, sometimes just by adding dimensions to images and reserving space for ads.

Final thoughts

Cumulative Layout Shift is the Core Web Vital of visual stability, and it’s the one most sites overlook, because layout jumps are easy to miss on a fast connection but genuinely frustrating for real users who watch the page lurch as it loads. The 0.1 target is very achievable once you know the causes.

The whole fix comes down to one idea: reserve space for everything before it loads. Set dimensions on images and media, give ads and embeds fixed slots, don’t shove content down with late banners, and handle fonts cleanly. Because the causes are specific and the fixes straightforward, CLS is often the quickest vital to pass. For the loading and responsiveness metrics, see our guides to Largest Contentful Paint and interaction responsiveness (INP).