A reader lands on your article, starts reading the first line, and then the whole page lurches downward because a banner ad finally loaded above the text. They lose their place. Worse, they tap a button that just jumped under their finger and trigger the wrong action. That jarring experience is exactly what Cumulative Layout Shift was built to quantify, and it is one of the three Core Web Vitals Google uses to assess page experience.
This guide explains what CLS measures, the official thresholds, how the score is actually calculated, the common causes, and the concrete fixes that move the number in the right direction.
What CLS Measures
CLS measures visual stability: how much visible content shifts position unexpectedly while a page is loading and being used. It is not about how fast the page loads (that is LCP) or how quickly it responds to input (that is INP). CLS is purely about whether elements stay put.
The key word is unexpected. If a user clicks a button and content expands in response, that movement is expected and does not count against you (Google excludes shifts that happen within 500 milliseconds of a user interaction). The shifts that hurt your score are the ones the reader did not ask for: an image that pushes the paragraph down, an ad slot that suddenly takes up space, a cookie banner that shoves everything sideways.
The Official CLS Thresholds
Google defines three buckets for CLS. The score is unitless and is assessed at the 75th percentile of page loads, segmented across mobile and desktop, so you need three quarters of real visits to clear the bar.
| Rating | CLS Score | What It Means |
|---|---|---|
| Good | 0.1 or less | Stable. Shifts are minor and not disruptive. |
| Needs Improvement | Above 0.1 and up to 0.25 | Noticeable movement that should be addressed. |
| Poor | Greater than 0.25 | Disruptive instability that frustrates users. |
These numbers are not arbitrary. Google's internal testing found that shifts of 0.15 and higher were consistently perceived as disruptive, while shifts of 0.1 and lower were noticeable but tolerable. The 0.25 ceiling for "poor" was chosen because it placed roughly 18 to 20 percent of origins in that bucket, which fit the target range Google uses when calibrating these thresholds.
How CLS Is Calculated
CLS is not a simple running total of every shift on the page. Understanding the formula tells you where to look when the score is high.
The layout shift score
Each individual layout shift gets a score built from two fractions:
Layout shift score = impact fraction x distance fraction
- Impact fraction is how much of the viewport the unstable elements occupy. If an element that fills half the screen moves, the impact fraction is large.
- Distance fraction is how far those elements moved, as a fraction of the viewport's largest dimension. An element that slides down by a quarter of the screen height has a distance fraction of 0.25.
So a small element nudging slightly produces a tiny score, while a large block jumping a long way produces a big one. This is why a single late-loading hero image or ad can dominate your CLS.
Session windows
Rather than summing every shift over the page's entire life, CLS uses session windows. A session window is a burst of shifts that occur in rapid succession: each individual shift is less than 1 second after the previous one, and the whole window caps at 5 seconds. Your reported CLS is the score of the largest session window, the single worst burst, not the grand total.
This windowing matters for long-lived pages such as infinite-scroll feeds. A page open for ten minutes is not penalized for the accumulated total of every minor shift over that time; it is judged on its worst concentrated burst.
Common Causes of Layout Shift
Images and videos without dimensions
This is the classic offender. When an <img> or <video> has no width and height attributes, the browser does not know how much space to leave, so it reserves none. When the file arrives, it shoves everything below it downward.
Ads, embeds, and iframes without reserved space
Ad slots, social media embeds, and third-party iframes often load after the main content and frequently have variable or unknown sizes. If you have not reserved a slot for them, they push your content around when they appear. Ads are one of the largest sources of layout shift on the web.
Web fonts causing reflow (FOIT and FOUT)
When a custom web font loads, the browser may first show invisible text (Flash of Invisible Text) or fallback text (Flash of Unstyled Text), then swap in the real font. If the web font has different metrics than the fallback, the text reflows and everything around it shifts.
Dynamically injected content above existing content
Banners, notification bars, newsletter prompts, and "you may also like" blocks inserted above content the user is already reading are guaranteed to cause shifts. The content the reader was looking at gets pushed down.
Actions waiting on a network response without reserved space
If a user action triggers content that takes more than 500 milliseconds to arrive (and so falls outside the interaction grace period), and you have not reserved space for it, the resulting shift counts against you.
How to Fix CLS
Always set width and height or aspect-ratio
Add explicit width and height attributes to every image and video. Modern browsers use these to compute an aspect ratio and reserve the correct space before the file loads. For responsive media, the CSS aspect-ratio property achieves the same result while letting the element scale fluidly.
Reserve space for ads, embeds, and iframes
Give every ad slot and embed a fixed minimum size based on the most common dimensions it will display. Style the container so the space is held even before the content arrives. When a slot goes unfilled, collapsing it later is far better than expanding it into your content.
Tune font loading
Use font-display to control the swap behavior, <link rel="preload"> to fetch critical fonts early, and the size-adjust descriptor (along with the override descriptors) to match your fallback font's metrics to the web font, which minimizes the reflow when the swap happens.
Avoid inserting content above existing content
Never inject content above what the user is already viewing unless it is in direct response to their interaction. Reserve a fixed-height slot for banners and notification bars so their appearance does not push anything. Load these elements within the interaction window where possible so the shift is excluded.
Layout stability also depends on a clean technical foundation. If you are auditing rendering and structured data at the same time, our guide to Article schema covers markup that should never interfere with how the main content paints.
How to Diagnose CLS
Use lab and field tools together. Lab tools reproduce shifts on demand; field data tells you what real users actually experience at the 75th percentile.
- Chrome DevTools (Performance panel) records a trace and flags every layout shift, letting you see exactly which elements moved and when.
- Lighthouse and PageSpeed Insights report your CLS and list the largest layout shift contributors with the elements responsible.
- The Chrome User Experience Report (CrUX) and Search Console's Core Web Vitals report give you field data, the 75th-percentile score from real visits that Google actually uses.
- The web-vitals JavaScript library lets you capture CLS from your own users and attribute shifts to specific elements in production.
Start with field data to confirm there is a real problem, then switch to lab tools to reproduce and isolate the offending elements. CLS rarely improves by accident, so fix the largest contributors first and re-measure.
CLS is one of three Core Web Vitals. The other two measure responsiveness and loading, so pair this work with our guides on INP (Interaction to Next Paint) and the broader standards behind a machine-readable web for a complete picture of page experience.
Frequently Asked Questions
What is a good CLS score?
A CLS of 0.1 or less is good. Between 0.1 and 0.25 needs improvement, and above 0.25 is poor. Google measures this at the 75th percentile of real page loads, split between mobile and desktop.
Does CLS have a unit?
No. CLS is a unitless score. It is the product of the impact fraction (how much of the viewport shifted) and the distance fraction (how far it moved), so the result is a ratio rather than a measurement in pixels or seconds.
Do shifts caused by user clicks count against CLS?
No, as long as the shift happens within 500 milliseconds of the interaction. Movement that a user triggers, such as expanding an accordion, is treated as expected and excluded from the score.
Why is my lab CLS different from my field CLS?
Lab tools test a single load under controlled conditions, while field data reflects many real users on varied devices, connection speeds, and behaviors such as scrolling and interacting. Field data at the 75th percentile is what Google uses to rate your page.
What is a session window?
It is a burst of layout shifts that occur within 1 second of each other, capped at 5 seconds total. Your reported CLS is the score of the single largest session window, not the sum of all shifts on the page.
Layout shifts dragging down your Core Web Vitals?
An advanced SEO audit pinpoints exactly which elements are shifting, why, and how to fix them, alongside the rest of your technical performance.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
