Quick answer
Cumulative Layout Shift (CLS) is a Core Web Vital that scores how much visible content moves unexpectedly while a page is open. It is the largest burst of layout-shift scores in a session window. Good is 0.1 or less.
Formula: layout shift score = impact fraction × distance fraction · CLS = largest sum of shift scores in a session window (≤ 5 s, gaps < 1 s)
What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) measures visual stability: how much content in view jumps around without the user asking for it. You start reading, an ad loads above the paragraph, and the text slides down. That jump is a layout shift. CLS is one of the three Core Web Vitals.
| Rating | CLS |
|---|---|
| Good | 0.1 or less |
| Needs improvement | 0.1–0.25 |
| Poor | over 0.25 |
How the score is calculated
Each shift gets a score:
layout shift score = impact fraction × distance fraction- Impact fraction: the share of the viewport covered by the moving element, before and after the move combined.
- Distance fraction: how far it moved, as a share of the viewport's largest dimension.
Worked example: a block covering half the viewport moves down by a quarter of the viewport height. Before and after together it covers 75% of the viewport, so the score is 0.75 × 0.25 = 0.1875, poor on its own.
Shifts are grouped into session windows: a burst of shifts less than 1 second apart, lasting at most 5 seconds. CLS is the burst with the highest total, not the sum of the whole visit. Shifts within 500 ms of a click, tap or key press are excluded because the user expected something to change.
Causes and fixes
| Cause | Fix |
|---|---|
| Images or videos without dimensions | Set width and height (or aspect-ratio) so space is reserved |
| Ads, embeds and banners injected late | Reserve a fixed slot; put notices at the bottom or overlay them |
| Web fonts swapping size | Preload key fonts; use size-adjusted fallback fonts |
| Content inserted above existing content | Insert below, or after a user action |
Animating top, height or margin | Animate transform instead |
Finding where it happens
Start from the pages with poor CLS at P75, then check mobile separately: narrow screens push images and banners into the first view. Reload the page with slow network throttling and watch for jumps, or use the browser's performance panel to see which element shifted.
CLS in TapCub
TapCub collects Web Vitals from real visits with the site script (sent once, when the first page is hidden; turn off with data-vitals="false"). In Web analytics › Monitoring › Performance, cards switch between P75, median, P95 and average, the breakdown splits by page, device, browser, country and operating system, and Slowest pages is sorted by P75 largest contentful paint. Details are in the performance docs.
Related: LCP, INP and website performance metrics.
See also
Was this explanation clear?
We use your answers to fix and expand this page.
Couldn’t send. Please try again in a minute.
Thanks for the feedback. We’ll use it to improve this page.You’ve already sent feedback on this page. Thanks.
Technical Engineer
Focuses on tracking code, SDKs, and API integrations, with practical guidance on implementation checks and troubleshooting.