Cumulative Layout Shift
Cumulative Layout Shift is a metric for how much content on a webpage still shifts around while it's loading. The higher the value, the more restless the page feels, and the more likely you are to accidentally click the wrong thing.
You open a webpage and start reading. Suddenly the text jumps downward because an image above it has just finished loading. This is exactly what Cumulative Layout Shift, or CLS, measures. The name roughly translates to “cumulative shift of the page layout.” The metric adds up all the jumps that happen during loading into a single value. A value of 0 means: nothing moved. Values above 0.25 are considered poor.
Why jumpy pages cost money
The obvious reason is annoyance while reading. If you’re looking for a line that just shifted away, you lose your place. It gets even more unpleasant with buttons. You want to tap “Read more,” and at that exact moment an ad slides in between, and you end up on some unrelated page. In online shops, that same misclick can trigger or cancel an order.
That’s why CLS isn’t just a matter of taste. Google counts this value among the so-called Core Web Vitals. These are three metrics for loading speed, responsiveness, and visual stability of a page. They factor into the ranking Google uses to decide how high up a page appears in search results. The influence isn’t huge, but it is measurable.
For operators of news sites or shops, revenue depends directly on this. Anyone who slips to page two on Google loses a large share of their visitors. Major providers have reported, based on measurements, that calmer pages are also read for longer. A low CLS is therefore cheaper to achieve than buying new advertising.
How jumps become a number
During loading, the browser watches every visible element. If one shifts without the user having scrolled or clicked, it’s counted as a layout shift. For each jump, the browser calculates two things together. First: what percentage of the screen was affected by the movement? Second: how far did the content shift, measured against the screen’s height or width? Both values are multiplied, and all results are added up.
An example: a text block fills half the height of the screen and shifts down by a quarter of the screen height. That gives 0.5 times 0.25, so 0.125. Two such jumps on a page are already enough to cross the threshold for “good.” That threshold sits at 0.1.
The most common cause is images without a specified size. The browser only learns how much space they need once they load, and then pushes everything below them out of the way. The fix is simple: set height and width in the source code so the space is reserved from the start. Ad slots and cookie-consent banners work similarly. Fonts that load later can also cause text to reflow.
Where you’ll run into CLS online
You feel CLS most directly on your phone. Small screens and slow mobile connections make every bit of late loading visible. News sites packed with ads are a classic case: the article is already there, then three ad slots open up one after another.
If you want to measure it yourself, you don’t need expensive software. Google’s free tool PageSpeed Insights shows the CLS value for any public address, along with the elements responsible for the jumps. In Chrome’s developer tools, you can watch the whole thing happen live.
In business news, the term usually shows up in the context of search engine optimization. A common misconception here is equating CLS with loading speed. A page can appear lightning-fast and still have a poor CLS because it keeps shifting afterward. Conversely, a slow page can load in a perfectly stable way. What’s measured isn’t speed, but stillness.