Cumulative Layout Shift
CLS / visual stability / jumping page / layout shift
Cumulative Layout Shift measures how much a page's visible content moves unexpectedly. Despite the name it is not a total: web.dev defines it as the largest burst of shifts within a five second window. Movement you caused, like clicking a button, does not count.
Start with the word that misleads. The name says cumulative, and the metric is not a cumulative total. web.dev defines CLS as a measure of the largest burst of layout shift scores for every unexpected layout shift during the page's lifecycle, where a layout shift is any visible element changing position from one rendered frame to the next.
A burst has a precise definition, called a session window. It is one or more shifts occurring in rapid succession, with less than one second between each shift, and a maximum of five seconds for the whole window. Your CLS is the single worst of those windows, not the sum of everything that ever moved.
The name is a leftover from an earlier version, and web.dev says so directly: previously CLS measured the sum total of all individual layout shift scores across the whole lifespan of the page. Any advice written before that change is describing a different calculation, which is worth checking the date on.
The other qualifier carries as much weight. Only unexpected shifts count. Mozilla puts it plainly: shifts that result from a user action, like pressing a button, or that are part of an animation, are not what this measures. A menu you designed to slide open is not a defect. The same movement happening on its own, while somebody is reading, is.
In practice
Mozilla names the most common cause and it is almost embarrassingly small: image or video elements with no width and height attributes, so the browser cannot know how much space to reserve until the file loads. Everything below jumps when it arrives. web.dev describes what that costs in the moments that matter, including a user clicking the wrong link or confirming a large order they meant to cancel.
Not the same as
- A total of every shift on the page
- It is the worst five second window. That definition replaced an earlier one that did sum everything.
- Animation you designed
- Movement caused by a user action, or part of an animation, is excluded.
Why it matters to you
Of the three loading and stability measurements, this is the one most often caused by something trivial and fixed once. It is also the one where the number and the experience diverge in a specific way: a single bad burst during loading can define the score even though the page is stable for the rest of the visit. Knowing it is a worst-window measurement tells you to look for a moment rather than a pattern.
What to ask or check
- 01Do our images and videos carry width and height attributes, so space is reserved before they load?
- 02Which five second window is producing our score, and what moves during it?
- 03Is any advice we are following written against the old definition, which summed every shift?
What people get wrong
That the score adds up every shift on the page. web.dev defines it as the largest burst within a five second session window, and says the summing definition was the previous one.
Red flags
- Images or videos published without width and height attributes.
- Guidance about reducing total shifts, which describes the superseded calculation.
- A poor score dismissed because the page looks stable once it has finished loading.
Where you will see it
In the Core Web Vitals report and PageSpeed Insights, and in the everyday experience of a page moving under your thumb as it loads.