Definition
Cumulative Layout Shift measures how much a page’s visible content jumps around unexpectedly while it loads. You’ve felt it: you go to tap a link, an image or ad finishes loading above it, everything slides down, and you tap the wrong thing. CLS puts a number on that instability. It’s one of the three Core Web Vitals, the one that covers visual stability, and unlike the other two it isn’t measured in time — it’s a unitless score.
Google’s “good” threshold is 0.1 or less, judged at the 75th percentile of real visits. The score comes from the Chrome User Experience Report, so it reflects what actual users experienced, not a lab simulation. A layout shift counts only when it’s unexpected — content moving in direct response to a user’s own click or tap doesn’t count against you.
Disambiguation: CLS is specific to Google’s Core Web Vitals program and is calculated with a particular formula (impact fraction × distance fraction, summed across shift windows). It’s sometimes loosely called a “jank” or “stability” score, but those are informal. When someone cites a CLS number, they mean the Google metric with its defined thresholds — not a generic sense of how bumpy a page feels.
Why it matters for marketing
Layout shift does its damage right at the moment of intent. Someone reaches to buy, subscribe, or click a call to action, and the button moves. Best case, they lose their place and get annoyed. Worst case, they tap an ad or the wrong product and bounce. For publishers, the irony bites hard: the biggest source of CLS is often the very display ads that fund the site, because late-loading ad slots shove the content a reader’s mid-sentence down the page.
CLS also tends to be the cheapest Core Web Vital to fix, which makes it attractive from a cost-benefit angle. Most of it comes down to reserving space for things that load late. That’s a design-and-markup discipline more than a heavy engineering lift, so it’s a place where a modest effort can move a Core Web Vitals report from “needs improvement” to “good.”
See also: Core Web Vitals (CWV) · Largest Contentful Paint (LCP) · Interaction to Next Paint (INP) · Digital Accessibility Platform (DAP)
How to calculate
A single layout shift score is the product of two fractions:
- Impact fraction — how much of the viewport the unstable element affected, from its start position to its end position.
- Distance fraction — how far the element moved, as a share of the viewport’s largest dimension.
Multiply the two, and that’s one shift. CLS then adds up these individual shift scores across the session, grouped into “session windows” (bursts of shifts separated by gaps), and reports the largest window’s total. The formula, in short:
layout shift score = impact fraction × distance fraction
An element that takes up half the screen and jumps a quarter of the way down produces a much bigger score than a small element nudging a few pixels. The math is why a full-width ad slot dropping in is so costly, and why a tiny icon loading late barely registers.
The threshold
| Rating | CLS score (at 75th percentile) |
|---|---|
| Good | ≤ 0.1 |
| Needs improvement | 0.1 – 0.25 |
| Poor | > 0.25 |
Source: Google Search Central and web.dev (see Sources). Unitless; measured from real Chrome users across mobile and desktop.
How to utilize CLS
Check the field report first. Google Search Console flags which URLs have CLS problems using real-user data, and PageSpeed Insights points to the specific elements causing shifts on a given page. DevTools can record a session and highlight each shift as it happens, so you can watch the jump you’re trying to kill.
Common use cases:
- Ad-monetized pages. Reserve the exact ad slot dimensions in CSS before the ad library loads, and show a styled placeholder so the space doesn’t collapse when no ad fills it. This is the single biggest CLS win for most publishers.
- Image-heavy layouts. Set explicit
widthandheight(or anaspect-ratio) on every image so the browser holds the right amount of room before the file arrives. - Dynamically injected content. Cookie banners, notification bars, and “you may also like” widgets that insert above existing content are classic offenders. Reserve space or inject below the fold.
- Web-font swaps. A font loading and re-flowing text can shift the layout. Preload fonts and size fallbacks to match to soften the swap.
Best practices
- Give every media element explicit dimensions. Width and height attributes, or a CSS
aspect-ratio, let the browser reserve space before the asset loads. This alone resolves a large share of CLS. - Reserve room for ads and embeds statically. Style the slot before the ad tag library runs, and keep the reserved space even when no ad is returned.
- Never insert content above existing content unless it’s a direct response to a user action. If a banner has to appear, push it in below the fold or overlay it rather than shoving the page down.
- Preload fonts and match fallbacks. Reducing the visual difference between the fallback and the web font limits the reflow when the real font arrives.
- Use
transformfor animations, not properties that trigger layout. Animatingtransformandopacitymoves things without forcing a reflow that counts against CLS. - Test with real content, not placeholder lorem ipsum. Shifts often only appear once real images, ads, and third-party widgets load in production.
Future trends
CLS has already been revised once — Google changed how it’s calculated in 2021 to use session windows, which stopped long-lived pages (think infinite-scroll feeds) from accumulating an unfairly high score forever. That kind of methodology refinement is the pattern to expect: the “good” threshold of 0.1 has been stable, but the way shifts are grouped and counted can change.
As more layout is assembled at runtime by frameworks and, increasingly, by AI-generated and personalized components, visual stability gets harder to guarantee and more valuable to protect. A page that stays put while it loads is easier for a person to read and easier for a rendering engine — including the crawlers behind AI answer surfaces — to capture cleanly.
FAQs
What is a good CLS score? 0.1 or less, at the 75th percentile of real visits. Between 0.1 and 0.25 needs improvement; above 0.25 is poor.
Why doesn’t CLS have a unit like seconds? Because it measures instability, not time. The score is the product of how much of the screen moved and how far it moved, summed across the worst burst of shifts — a ratio, not a duration.
What causes high CLS? Images and video without dimensions, ad slots and embeds that load late without reserved space, dynamically injected banners and widgets, and web fonts that reflow text when they swap in. On ad-supported pages, ads are usually the top cause.
Do layout shifts from my own clicks count against me? No. Shifts that happen within about 500 ms of a user interaction are treated as expected and excluded. CLS only penalizes unexpected movement.
How do I fix layout shift from ads? Reserve the ad slot’s dimensions in CSS before the ad library loads, and keep a styled placeholder so the space doesn’t collapse when an ad isn’t served.
Will adding width and height to images really help? Yes — it’s one of the highest-impact fixes. Explicit dimensions or an aspect-ratio let the browser hold the correct space before the image downloads, so nothing jumps when it arrives.
Is CLS a ranking factor? Yes, as one of the three Core Web Vitals in Google’s page experience signals — a tiebreaker between comparable pages rather than a dominant ranking lever.
Why does my CLS look fine in the lab but fail in the field? Lab tests often miss shifts that only occur once real ads, third-party scripts, and production images load. Field data from real users captures those. Trust the Search Console field report over a clean local run.
Related Terms
- Core Web Vitals (CWV)
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Digital Accessibility Platform (DAP)
- Page Experience
- First Contentful Paint (FCP)
- Web fonts / font loading
- Display advertising
- PageSpeed Insights
- Chrome User Experience Report (CrUX)
Freshness note: CLS is a Google-defined metric; its “good” threshold of 0.1 is current as of July 2026, and its calculation method was last revised (session windows) in 2021.
Sources
- Google Search Central — Understanding Core Web Vitals and Google search results: https://developers.google.com/search/docs/appearance/core-web-vitals
- web.dev — Cumulative Layout Shift (CLS): https://web.dev/articles/cls
- web.dev — Optimize Cumulative Layout Shift: https://web.dev/articles/optimize-cls