At a glance
- Each shift scores impact fraction multiplied by distance fraction.
- Shifts are grouped in session windows: less than 1 second apart, at most 5 seconds long. CLS is the worst window.
- Shifts within 500 milliseconds of a user input are treated as expected and excluded.
- Reserving space for images, ads, embeds and late content prevents most shifts.
How CLS is calculated
web.dev defines CLS as "a measure of the largest burst of layout shift scores for every unexpected layout shift" during the life of a page. Each shift is scored as:
layout shift score = impact fraction × distance fractionThe impact fraction is the share of the viewport affected by the moving elements; the distance fraction is how far they moved relative to the viewport. Shifts are grouped into session windows, with "less than 1-second in between each shift and a maximum of 5 seconds for the total window duration". The window with the highest total is the page's CLS.
Shifts that happen within 500 milliseconds of a click, tap or key press carry the hadRecentInput flag and do not count. Opening an accordion when someone taps it is expected movement. A banner that drops in two seconds later is not.
Causes web.dev lists, mapped to casino components
| Cause | Casino example | Fix |
|---|---|---|
| Images or videos without dimensions | Game tiles and banners with no width and height | Set width and height, or CSS aspect-ratio |
| Fonts that render larger or smaller than the fallback | Display fonts in promotional headings | Matched fallback metrics, font-display choice, preload |
| Ads or widgets that resize themselves | Review carousels, social embeds, odds widgets | Reserve a minimum height |
| Content added above existing content | Consent prompts and promotional strips inserted at the top | Overlay, or reserve the slot from the first paint |
| Dynamically injected content without dimensions | Payment frames and personalized modules | Fixed-size container, skeleton of the same size |
Why the whole visit matters
CLS keeps counting while the page is open. Infinite scroll in a game lobby, a "load more" button that inserts content above the current position, or a live odds module that grows as markets open can all add shifts long after the first load. Test the page by scrolling and waiting, not only by loading it.
web.dev also notes that pages restored from the back/forward cache do not repeat their load-time shifts, so keeping pages eligible for the bfcache helps CLS. See caching and delivery.
A quick review routine
- Record a Performance trace in Chrome DevTools while loading, scrolling and waiting on the lobby. DevTools marks layout shifts in the recording and identifies the elements that moved.
- List each shifting element against the table above.
- Reserve space for it, then repeat the trace on a throttled mobile profile.
- Confirm the result in field data; the step by step fixes are in the CLS remediation guide.
Questions
Does a carousel that slides count as layout shift?
Not when it moves content with CSS transforms, which do not change layout. web.dev recommends animating with transform rather than properties such as top and left.
Is a cookie banner always a CLS problem?
No. A banner that overlays the page does not move other content. One inserted at the top of the document after the first paint pushes everything down and does count.
Why is CLS a score and not a time?
Because it measures movement. The score combines how much of the viewport moved with how far it moved, so it has no unit.
Sources
- web.dev, Cumulative Layout Shift (CLS), last updated April 12, 2023.
- web.dev, Optimize Cumulative Layout Shift, last updated February 7, 2025.
- web.dev, How the Core Web Vitals metrics thresholds were defined, last updated May 7, 2025.