CLS: nothing jumps
The button moved
A player opens Shard Garden's news page and reaches for "Join a garden". At that moment a soundtrack banner loads above it, the page slides down, and they tap "Buy the soundtrack" instead.
Cumulative Layout Shift (CLS) measures how much visible things move unexpectedly. Good is 0.1 or less, poor is over 0.25. It has no unit: it is a score made from two fractions.
Scoring one shift
Each layout shift gets a score: impact fraction times distance fraction.
- Impact fraction: how much of the screen the moving elements cover, before and after the move together.
- Distance fraction: how far they moved, as a share of the screen's biggest side.
In web.dev's example, the moving elements cover 0.75 of the screen and move 0.25 of its height. 0.75 times 0.25 is 0.1875: one shift, already worse than the 0.1 target.
Score it
The soundtrack banner pushes content covering half the screen (0.5) down by a fifth of the screen height (0.2). What is that shift's score?
- 0.1
- 0.7
- 0.25
Show the answer
0.1
Impact fraction times distance fraction: 0.5 times 0.2 is 0.1. Adding the fractions, 0.7, is the common mistake.
Windows, and the 500 ms rule
Shifts are grouped into session windows: each shift less than 1 second after the last, and the whole window no longer than 5 seconds. CLS is the total of the worst window.
Shifts within 500 ms of a tap, click or key press don't count, because the player asked for them. Opening a menu is fine. Scrolls, drags and pinch-zoom are not counted as that kind of input.
Quick check
A player taps "Show more levels", and the list opens within 500 ms, pushing the content below it down. That shift counts toward CLS.
- True
- False
Show the answer
False
Shifts within 500 ms of a tap are marked as caused by the player and left out. CLS only counts shifts the player didn't ask for.
Reserve the space
- Images and videoAlways give
widthandheightattributes, or a CSSaspect-ratio, so the box exists before the file arrives. - Ads and embedsGive the slot a
min-heightbefore the ad or trailer loads. - FontsA web font that is bigger or smaller than its stand-in shifts text. The fonts lesson shows how to match them.
- AnimationMove things with
transform, not by changingtop,heightorwidth.
Fix the rule
1.trailer {2 width: 100%;3 aspect-ratio: 16 / 9;4}5.ad-slot { }6.news-card {7 margin: 16px;8}
The ad loads two seconds late and shoves every news card down. Which line should Remy change?
- Line 3
- Line 5
- Line 7
Show the answer
Line 5
The ad slot on line 5 has no size, so it is 0 pixels tall until the ad arrives. Giving it a min-height reserves the space. Line 3 already reserves the trailer's space.
Games shift too
A game page can shift as well. If Remy's script sets the canvas size only after it loads, the canvas pops in and pushes the page around. Sizing it in CSS from the start, for example with aspect-ratio: 16 / 9, keeps it still.
Remember the field counts the whole visit. A "Nova sent you a gift" banner that slides in after 30 seconds never shows in a lab test, but players feel it, and field CLS counts it.
Before anything is drawn
LCP, INP and CLS all happen in the browser. But nothing can be drawn until the server answers.
Bolt says: Next: the server's side of speed, Time to First Byte.
Fact-checked 11 October 2026
- web.dev: Cumulative Layout Shift (CLS) web.dev
- web.dev: Optimize Cumulative Layout Shift web.dev
- web.dev: Why lab and field data can be different web.dev