Cumulative Layout Shift (CLS): What It Is and How to Fix It

Cumulative Layout Shift (CLS) is a Core Web Vital that measures unexpected movement of page content during a visit, scoring each shift by how much of the viewport moves and how far it travels. Google grades a page on its largest burst of shifts at the 75th percentile of real users, and 0.1 or less is good.

What Is Cumulative Layout Shift?

Cumulative Layout Shift quantifies how much the things on a page jump around while someone is trying to read or click. A layout shift happens every time a visible element changes its position from one rendered frame to the next without the user asking it to. The classic case is an image loading and pushing the paragraph below it downward, or a banner appearing at the top and shoving the whole page down.

Google does not add up every shift equally and call it a day. Each individual shift is scored as the impact fraction times the distance fraction, and then CLS is taken as the worst burst of shifts in a session window rather than the total across the entire visit. This burst-based model matters because a page that shifts a little constantly is treated differently from a page that shifts hard once, and the burst model captures the moment that actually frustrates a user.

The two fractions are worth naming precisely. The impact fraction is the area of the viewport occupied by elements that moved, and the distance fraction is how far the greatest-moving element traveled, also measured against the viewport. Multiply them and you get one shift's score, usually a small decimal like 0.05.

How Is the CLS Score Calculated?

A single layout shift score is the product of two ratios. The impact fraction measures what proportion of the viewport is unstable, and the distance fraction measures how far the most-displaced element moved relative to the viewport size. The math makes a shift in the middle of the screen, moving a long way, score higher than a small shift in the corner.

CLS itself is not the running total of every shift on the page. The metric uses a session windowing model: it looks at the largest cluster of shifts that happen close together in time, called a burst, and reports that burst's sum. If shifts are spread out, the page can still score well even though the user noticed several small jumps.

• Impact fraction - the union of all moved elements' before-and-after areas, divided by the viewport area.
• Distance fraction - the largest single movement of any element, divided by the viewport's largest dimension.
• Session window - the algorithm groups shifts into windows and keeps the highest-scoring window as the page's CLS.

What Are Google'S Published CLS Thresholds?

Google publishes clear bands for CLS, assessed at the 75th percentile of real user visits so that a slow tail of sessions does not get averaged away. The thresholds are the same ones used across all Core Web Vitals, and they are the line your Search Console Core Web Vitals report holds you to.

These are field thresholds. A page can score inside the good band for most users and still fail if the worst 25 percent of sessions cross 0.25, which is exactly why the percentile matters more than your own browsing experience.

What Is the Difference Between Field Data and Lab Data for CLS?

Field data comes from real users through the Chrome UX Report (CrUX) and real user monitoring tools, captured as people actually load and interact with your pages. Lab data comes from a synthetic tool like Lighthouse running a repeatable, cold load with no personalization, no late ads, and no real user clicks.

This gap explains a problem teams hit constantly: Lighthouse shows a CLS of 0 while Search Console reports a failing field CLS. The lab run does not see the things that shift in production because they depend on conditions the lab cannot reproduce.

• Late-loading ads and third-party embeds that arrive after the initial render.
• Consent banners and cookie notices injected above the content after load.
• Personalization and A/B test variants that change layout per visitor.
• Web fonts that swap after text has already painted.
• User interaction, like expanding accordions, that the lab does not perform.

Because Lighthouse cannot model those conditions, a green lab score is not proof your field CLS is fine. The field number is the one Google uses for ranking and the one your visitors feel.

What Causes Cumulative Layout Shift?

Most CLS comes from a short list of predictable causes, each with a direct fix. The common thread is content that takes up no space until it arrives, then occupies space and pushes everything else.

• Images and video without width and height or an aspect-ratio box, so the browser reserves no space before they load. Fix: set explicit dimensions or CSS aspect-ratio so the slot is reserved.
• Ad and embed slots with no reserved space, which collapse to zero height until the creative fills. Fix: give every ad and embed a min-height or a placeholder that matches the expected size.
• Cookie and consent banners injected above the content rather than as an overlay. Fix: render them as fixed-position overlays so they do not displace the page body.
• Web fonts causing FOUT or FOIT swaps when the fallback and final fonts have different metrics. Fix: use size-adjust font fallbacks or font-display with matched metrics.
• Dynamically injected content such as promo bars and A/B test variants appearing after load. Fix: reserve space for injected elements or insert them in a reserved region.
• CSS animations of layout-affecting properties like height, margin, or top instead of transform and opacity. Fix: animate transform and opacity, which do not trigger layout.

Notice that tag managers and A/B testing tools show up twice on this list. They are among the most common CLS offenders on pages that are otherwise fast, because they inject and swap content after the initial render.

How Do You Fix Cumulative Layout Shift?

The fix for nearly every cause is the same idea: reserve the space before the content fills it. When the browser knows how big an element will be, later-loading media, ads, and banners slide into a slot instead of shoving the page.

For media, set the width and height attributes or a CSS aspect-ratio so the layout engine computes the box up front. For ads and embeds, declare a min-height that matches the slot size even when the creative is empty. For fonts, use a fallback with matching metrics so the text does not reflow when the real font loads. For injected UI like banners and test variants, either overlay it or reserve a fixed region for it.

The one category that needs a different fix is animation. Animating height, margin, or position forces layout recalculation on every frame. Switch those animations to transform and opacity, which the compositor handles without shifting surrounding content.

How Do You Diagnose a Failing CLS?

Diagnosis should follow a fixed sequence so you do not guess. Start from field data, confirm the failing group, then move to reproduction and attribution before you ship anything.

1. Pull your field CLS from the Search Console Core Web Vitals report to confirm the metric is actually failing.
2. Identify the specific URL group crossing the threshold rather than assuming it is the whole site.
3. Reproduce the shift using the Web Vitals browser extension or the Performance panel with Layout Shift regions enabled.
4. Inspect the highlighted shifting element to see exactly what moved and when.
5. Attribute the shift to the responsible script or stylesheet, such as an ad tag, font file, or injected banner.
6. Ship the reservation fix, whether that is dimensions, a min-height, an overlay, or a transform-based animation.
7. Re-verify in field data after the 28-day CrUX window, since field metrics only refresh on that cycle.

Skipping the field confirmation step is the usual mistake. Teams optimize a shift they can see in Lighthouse while the real field failure comes from late ads they never reproduced.

Why Is CLS a Paid Media and Conversion Problem?

CLS is usually framed as an SEO metric, but for venture-backed startups it is first a paid media and conversion problem. On a paid landing page, a shifting CTA button is the difference between a click and a misclick, and you are paying for every one of those visits through ad spend.

When a promo bar drops in and moves the buy button two seconds after the page loads, a portion of clicking users hit the wrong target. That wasted spend is invisible in most channel reports because the visit still "converted" or bounced for reasons the ad platform cannot see. The fix belongs in the same instrumentation work as your conversion tracking, not in a separate performance cleanup.

A/B testing tools and tag managers deserve special callouts here. They are among the most common CLS offenders on otherwise fast pages because they swap headlines, inject variants, and fire tags after load. The very tools you use to improve conversion can be quietly depressing it through layout shift, which is why measuring CLS should sit next to your experiment results rather than in a separate backlog.

How Does CLS Behave in Single Page Apps?

Single page apps add a nuance worth knowing. CLS accumulates per page view, and historically SPA route changes did not reset the metric the way a full page navigation does, so shifts during client-side transitions could keep adding to the same score.

The browser's bfcache, which restores pages from a frozen snapshot on back-forward navigation, also interacts with layout shift: a page restored from bfcache should not be re-scored as if it were a fresh load. Modern measurement accounts for soft navigations and bfcache restores so that SPA route changes and back-forward trips are attributed correctly rather than double counted or left unreset.

For most teams the practical takeaway is simple. Treat every client-side route change as a place shifts can happen, reserve space in your route components the same way you would on a server-rendered page, and verify in field data rather than assuming the SPA framework handles it.

Frequently Asked Questions

What Is a Good CLS Score?

A good CLS score is 0.1 or less, measured at the 75th percentile of real user visits. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is considered poor. Because the threshold is a percentile, a page fails if the worst 25 percent of sessions cross 0.25 even when most users have a perfect experience, so field data is what decides the band.

What Does CLS Mean in Simple Terms?

CLS means how much the content on a page jumps around while you are using it, scored as a small decimal where lower is better. Each unexpected move is measured by how much of the screen shifted and how far it traveled, then the worst burst of shifts during the visit becomes the page's score. It is one of Google's three Core Web Vitals alongside load speed and interaction latency.

How Do You Fix Cumulative Layout Shift?

You fix CLS by reserving space for anything that loads or appears after the initial render, so later content slides into a slot instead of pushing the page. Set image and video dimensions or aspect-ratio, give ads and embeds a min-height, overlay consent banners instead of injecting them above content, and animate with transform and opacity rather than layout properties. The reservation principle solves almost every common cause.

Why Does Lighthouse Show Zero CLS but Search Console Fails?

Lighthouse runs a cold, synthetic load with no real ads, personalization, fonts, or user clicks, so it never sees the conditions that shift your production page. Field data from CrUX captures real visits where late-loading ads, consent banners, A/B test variants, and font swaps actually move content. A green lab score therefore proves nothing about your field CLS, which is the number Google uses.

Is CLS Only an SEO Problem?

No. CLS is a conversion and paid media problem first for most startups because shifting CTAs cause misclicks on pages you pay to send traffic to, wasting ad spend. A/B testing tools and tag managers are among the most common offenders on otherwise fast pages, quietly depressing the conversion rates they were meant to improve. Measuring CLS belongs in the same instrumentation as your conversion tracking, not a separate performance task.

Key Takeaways

• CLS measures unexpected visual shifts as impact fraction times distance fraction, scored on the largest burst of shifts at the 75th percentile of field visits.
• Google's bands are clear: 0.1 or less is good, 0.1 to 0.25 needs improvement, above 0.25 is poor.
• Lab CLS of zero can coexist with a failing field CLS because late ads, consent banners, fonts, and personalization only appear for real users.
• Every common cause is fixed by reserving space up front, except animations, which should use transform and opacity instead of layout properties.
• Diagnose from field data first, reproduce the shift, attribute it to a script or stylesheet, ship the reservation fix, then re-verify after the 28-day CrUX window.
• CLS is a paid media and conversion problem, not just SEO, and A/B tools and tag managers are frequent offenders that belong in your conversion instrumentation.