What Is Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much a page's content unexpectedly moves around while it loads, the annoying jumps that happen when an image or ad loads late and shoves everything down. CLS quantifies visual stability, and Google considers a score of 0.1 or less 'good.' High CLS frustrates users, causes mis-clicks, and can hurt search rankings, making it a key target for any performance-conscious business site.
- What it measures
- Unexpected movement of visible page content during loading (web.dev)
- Good threshold
- 0.1 or less; 0.1-0.25 needs improvement; over 0.25 is poor (web.dev / Google)
- How it's scored
- Impact fraction multiplied by distance fraction of shifting elements (web.dev)
- Common causes
- Images/ads without dimensions, late-loading fonts, injected content (web.dev)
What is Cumulative Layout Shift? #
Cumulative Layout Shift, or CLS, measures how much the visible content of a page unexpectedly moves while it loads. Everyone has experienced the problem it captures: you go to tap a button, and at the last instant an image or ad finishes loading, pushing the button down so you tap the wrong thing. CLS puts a number on that instability. It sums up the unexpected shifts of visible elements during loading, producing a score, lower is better, that reflects how visually stable the page feels. Importantly, CLS only counts unexpected shifts; movement you deliberately trigger, like expanding a menu you tapped, does not count. CLS is one of Google's three Core Web Vitals, sitting alongside loading speed (LCP) and interactivity (INP) as a measure of real user experience. It is a standard focus of /services/speed-optimization and is explained in context in /wiki/website-speed-guide. Where LCP asks 'how fast does content appear,' CLS asks 'does that content stay put,' capturing a different but equally real source of user frustration that a page can otherwise hide behind fast load numbers.
Why does CLS matter for users and business? #
CLS matters because layout shifts are genuinely infuriating and can cost real money. When content jumps as a page loads, visitors lose their place while reading, and worse, they mis-tap, hitting the wrong link, accidentally submitting a form, or clicking an ad they never meant to. On a business site, a customer who intends to tap 'Call now' but instead lands on the wrong element may simply give up. Beyond the immediate frustration, high CLS signals a page that feels unpolished and unreliable, undermining trust. Google recognized this by making CLS a Core Web Vitals ranking signal, so a jumpy page can quietly hurt the search visibility you are building through /services/local-seo. The problem is often worse on mobile, where screens are small, connections vary, and mis-taps are easy, and where mobile-first indexing, covered in /wiki/what-is-mobile-first-design, means the mobile experience drives rankings. Improving CLS therefore protects both conversions and search performance. Because the fixes are usually specific and technical rather than sweeping, CLS is often one of the more tractable wins in a /services/speed-optimization engagement.
What counts as a good CLS score? #
Unlike LCP, which is measured in seconds, CLS is a unitless score based on how much content moves and how far. Google's thresholds are: 0.1 or less is 'good,' 0.1 to 0.25 'needs improvement,' and above 0.25 'poor.' As with the other Core Web Vitals, Google evaluates CLS at the 75th percentile of real-user loads, so most visits must hit the target to pass. The score is calculated by combining two factors for each unexpected shift: the impact fraction (how much of the visible screen the moving elements affect) and the distance fraction (how far they move), then summing the qualifying shifts during the page's lifespan. In practice you do not need to compute this by hand, tools like PageSpeed Insights and Search Console's Core Web Vitals report show your CLS directly, and a /tools/website-grader gives a quick read. The practical goal is a score comfortably at or below 0.1 for real visitors. Because CLS reflects the real-world spread of devices and connections, field data matters more than a single lab test, especially since some shifts only appear under real loading conditions.
What causes layout shifts? #
A handful of common issues cause most CLS problems. The biggest is images and videos without specified dimensions: if the browser does not know how much space an image will occupy, it renders the surrounding content first and then shoves it aside when the image loads. Setting explicit width and height attributes (or a reserved aspect ratio) fixes this by holding the space in advance. Ads, embeds, and iframes that load late and without reserved space are another major cause, common on sites running third-party widgets. Web fonts can cause shifts when a fallback font is swapped for the custom font at a different size, nudging text. Dynamically injected content, banners, notices, or elements added by JavaScript above existing content, pushes everything down. Finally, animations that change layout (rather than using transform) can trigger shifts. Diagnosing which of these affects a given page is the core of CLS work in /services/speed-optimization, and the fixes overlap with the general performance hygiene in /wiki/website-speed-guide. Most are straightforward: reserve space for anything that loads asynchronously, so nothing has to jump when it finally arrives.
How do you fix CLS? #
Fixing CLS comes down to reserving space so nothing moves unexpectedly. The most impactful step is always specifying dimensions for images and videos, either explicit width and height attributes or a CSS aspect-ratio, so the browser holds the correct space before the media loads. For ads, embeds, and iframes, reserve a fixed container size so late-loading third-party content fills a pre-sized box instead of pushing the page around. Handle fonts carefully: use font-display strategies and size-adjusted fallbacks so swapping to the custom font does not resize text, or preload critical fonts. Avoid inserting content above existing content after load, if you must add a banner or notice, reserve its space or place it where it will not displace what the user is already reading. Prefer CSS transform for animations, since it does not affect layout. These techniques are standard in professional /services/web-design and the focus of /services/speed-optimization. The pattern below shows the single highest-value fix, setting image dimensions, which alone resolves many CLS problems by letting the browser reserve the right space from the start.
<!-- Width and height let the browser reserve space -->
<img src="/images/team.jpg" width="800" height="600"
alt="Our team" style="max-width:100%; height:auto;">
<!-- Reserve a fixed box for a late-loading ad/embed -->
<div class="ad-slot" style="min-height:250px;">
<!-- third-party content loads here -->
</div>How is CLS measured? #
Like the other Core Web Vitals, CLS is measured in both lab and field environments, and the distinction is important. Lab tools such as Lighthouse and PageSpeed Insights simulate a page load and report a CLS score, useful for debugging because you can identify which elements shift and fix them iteratively. But lab tests can understate real CLS, because some shifts only occur under real conditions, when a real ad network is slow, when a specific font takes time to swap, or when a user scrolls and triggers late-loading content. That is why field data from Google's Chrome User Experience Report, surfaced in Search Console's Core Web Vitals report, is what Google uses for ranking and what best reflects your actual visitors' experience, evaluated at the 75th percentile. The practical workflow is to use lab tools to find and fix the specific elements causing shifts, then confirm the improvement with field data over the following weeks as it updates. Some diagnostic tools even highlight exactly which elements moved, making CLS one of the more directly fixable Core Web Vitals once you can see the culprits. This measurement discipline underpins credible /services/speed-optimization work.
How does CLS relate to the other Core Web Vitals? #
CLS is one of three Core Web Vitals, and each measures a distinct part of the experience. LCP, explained in /wiki/what-is-largest-contentful-paint, measures loading, how fast the main content appears. Interaction to Next Paint (INP) measures interactivity, how quickly the page responds to taps and clicks. CLS measures visual stability, whether content stays put as the page loads. A good page should pass all three, because they capture different frustrations: a page can load quickly (good LCP) yet still annoy users by jumping around (poor CLS). The three can also interact, since a large element that loads late might hurt both LCP and CLS at once, and fixing image dimensions can help stability while image optimization helps loading. This is why /services/speed-optimization addresses the whole set rather than one metric in isolation, and why /wiki/website-speed-guide frames them together. For a business site, the target is a page that appears fast (LCP), responds instantly (INP), and holds steady (CLS), the combination that makes a site feel smooth and trustworthy to real visitors and satisfies Google's page experience signals.
How CLS fits your overall site quality #
CLS may sound like a narrow technical metric, but it reflects a broader commitment to a polished, considerate user experience. A page that stays visually stable as it loads feels professional and respectful of the visitor's attention; a page that lurches and shoves content around feels careless, even if it is otherwise attractive. Because most CLS fixes are specific, reserving space for images, ads, and fonts, they are usually achievable without a full rebuild, making CLS one of the more approachable performance wins, though on older or heavily third-party sites it can require deeper work best handled during a /services/website-redesign. CLS also connects to disciplined development practices: sites built carefully, with dimensions on media and space reserved for dynamic content, rarely have serious CLS problems in the first place, which is why prevention during /services/web-design beats remediation later. For local businesses whose visitors often arrive on phones ready to call or book, served on pages like /web-design-for-dentists and /web-design-for-restaurants, eliminating layout shifts means fewer mis-taps and more completed actions. Monitoring CLS through Search Console and folding fixes into ongoing /services/care-plans keeps a site stable as new content, images, and features are added over time.
FAQ
What is a good CLS score?
Google considers a CLS of 0.1 or less 'good,' 0.1 to 0.25 'needs improvement,' and above 0.25 'poor.' Unlike LCP, CLS is a unitless score based on how much content shifts and how far. It is measured at the 75th percentile of real-user loads, so aim comfortably at or below 0.1 for actual visitors.
What is the number one cause of layout shift?
Images and videos without specified dimensions. When the browser does not know how much space media will take, it renders surrounding content first and then shoves it aside once the media loads. Setting explicit width and height, or a CSS aspect-ratio, reserves the space in advance and resolves a large share of CLS problems on most sites.
How do I fix cumulative layout shift?
Reserve space for anything that loads late. Set width and height on images and videos, give ads and embeds a fixed-size container, handle web fonts so text does not resize on swap, and avoid injecting content above what the user is already viewing. Use CSS transform for animations. Then confirm improvements with real-user field data.
Does CLS only matter on mobile?
No, but it often matters most there. Small screens, varied connections, and finger taps make mis-clicks from shifting content more likely and more costly on mobile, and mobile-first indexing means the mobile experience drives rankings. CLS applies to desktop too, but fixing it on mobile usually delivers the biggest gains for both users and search.
Why is my CLS worse in the field than in tests?
Lab tests simulate a clean, controlled load and may miss shifts that only happen in reality, when real ad networks are slow, specific fonts take time to swap, or users scroll into late-loading content. Field data from real visitors captures these, which is why Google uses it for ranking. Fix the elements lab tools flag, then verify with field data.
Does CLS affect SEO?
Yes. CLS is one of Google's three Core Web Vitals, which are confirmed page-experience ranking signals. A jumpy, unstable page can hurt visibility, and it certainly hurts conversions through mis-taps and frustration. Because most CLS fixes are specific and achievable, improving it is often one of the more tractable ways to strengthen both user experience and search performance.
Was this helpful?