What Is Cumulative Layout Shift (CLS)? Complete Guide (2026)

Why Layout Shifts Cost You Visitors and Sales

CLS is one of the few metrics where the user pain is immediately visible. It directly affects:

• Misclicks: A button that shifts the moment a visitor taps it sends them to the wrong destination — including unintended purchases, form submissions, or off-site navigation. On mobile, where touch targets are dense, this is especially destructive.
• Reading flow: When the paragraph someone is reading jumps down because a late-loading image arrived, they lose their place. Many will not scroll back.
• Perceived quality: Stable layouts feel professional. Jumpy ones feel broken — even if every other metric is fast.
• Google rankings: CLS is part of the Page Experience signal. Pages that fail Core Web Vitals lose ranking ground in competitive queries where quality is otherwise equal.
• AI search visibility: AI-driven search systems (Google AI Overviews, generative answer engines) tend to source from pages that already rank well — and a failing CLS pulls those rankings down.

How CLS Is Calculated

CLS is the sum of layout shift scores for every unexpected movement that occurs during a session window. Each individual shift score is calculated as:

Layout Shift Score = Impact Fraction × Distance Fraction

• Impact Fraction: The portion of the viewport affected by the moving element. If a banner takes up 40% of the visible screen and it moves, the impact fraction is 0.4.
• Distance Fraction:How far the element moves, expressed as a fraction of the viewport's longest dimension. An element that drops 25% of the viewport height has a distance fraction of 0.25.

In that example: 0.4 × 0.25 = 0.1— already at Google's "good" ceiling from a single shift.

How to Check Your CLS Score

CLS, like the other Core Web Vitals, is measured both in the lab (synthetic) and in the field (real user data via the Chrome User Experience Report). Google weights field data for ranking purposes.

• Greadme's deep scan — surfaces your CLS score alongside the rest of your Core Web Vitals, identifies which page elements are causing the shifts, and pairs each issue with an AI-generated fix or one-click GitHub PR.
• Greadme's crawler scan — measures CLS across every indexable page on your site, so you can pinpoint which templates (product pages, article pages, listing pages) are dragging your CWV down.
• Google Search Console → Core Web Vitals report — shows CLS performance across your entire site based on real user data (CrUX), segmented by mobile and desktop.
• Browser developer tools → Performance tab — record a page load locally; the "Experience" lane in the timeline shows every layout shift event with the offending element highlighted.

9 Proven Ways to Fix Layout Shifts

img, video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

Common CLS Culprits and Fixes

How CLS Compares to Other Core Web Vitals

CLS is the only Core Web Vital that doesn't measure speed. It can be excellent on a slow site or terrible on a fast one — they measure entirely different aspects of the experience.

FAQ

What is a good CLS score?

Google defines a good CLS as 0.1 or less. Scores between 0.1 and 0.25 "need improvement," and anything above 0.25 is considered poor. The threshold applies to the 75th percentile of real-user sessions — meaning 75% of visits must come in under 0.1 to pass.

Is CLS a Google ranking factor?

Yes. CLS is one of the three Core Web Vitals that became a confirmed ranking signal in June 2021 via the Page Experience update. Google uses field data from the Chrome User Experience Report (CrUX), not synthetic lab scores, for the ranking signal.

What changed in the 2021 CLS update?

Originally, CLS summed every layout shift across the entire page lifetime, which unfairly penalized long-lived single-page apps. The 2021 update introduced session windows: the score is now the maximum 5-second window of consecutive shifts (with no more than 1-second gaps). The headline number you optimize against is that worst burst.

Do shifts after user interaction count toward CLS?

No — shifts that occur within 500 ms of a user input (click, tap, keypress) are excluded. So an accordion expanding when someone clicks "Read more" does not affect your score. Only shifts that happen without user prompting are counted.

Why are images the biggest cause of bad CLS?

Because images without explicit width and height attributes default to taking zero space until they finish downloading. Once the image arrives, the browser inserts its full dimensions, pushing every element below it down — usually with a large impact fraction and a meaningful distance fraction, which multiply into a high shift score.

Does CLS affect AI search engines like ChatGPT and Perplexity?

Indirectly. Generative search systems most often surface pages that are already ranking well in traditional search — and CLS is part of that ranking signal. Additionally, Google AI Overviews preferentially cites pages that pass Core Web Vitals. A failing CLS reduces both your search visibility and your odds of being chosen as a citation.

Can a single-page app have good CLS?

Yes — but it requires deliberate effort. Reserve space for every async section with skeletons, animate route transitions with transform rather than layout properties, and ensure modals and toasts use position: fixedoverlays. The 5-second session window means a single bad transition can dominate your score, so it's worth profiling each route change.