Cumulative layout shift (CLS)
What is cumulative layout shift (CLS)?
Cumulative layout shift (CLS) measures how much the content of a page moves unexpectedly while it loads and while it is being used. Each shift is scored by how much of the screen it affects and how far things move, and CLS is the largest total within one short burst of shifts. A score of 0.1 or less is good; above 0.25 is poor. It is one of the three Core Web Vitals.
Example
Take a product page on a phone whose screen is 800 pixels tall. While it loads, an 80-pixel free-delivery bar appears at the top and pushes everything down. The shift affects the whole screen (1.0) by 80 of 800 pixels (0.1): 1.0 × 0.1 = 0.10. A moment later an image with no set dimensions arrives and pushes the lower half of the screen (0.5) down by 280 pixels (0.35): 0.5 × 0.35 = 0.175. The total is 0.275, above 0.25 and in the poor band. Anyone reaching for “Add to basket” at that moment taps something else.
The fix is simple: the bar has its space reserved from the start, and the image carries a width and height so the browser leaves room for it. Both shifts disappear and CLS drops to 0.
Why it matters for a business
CLS is the metric customers describe as “I tapped, and it went somewhere else”. In a shop that means the wrong size in the basket, an ad opened by accident, or an abandoned order. The usual causes are small and quick to fix: images and videos with no dimensions, banners and bars injected at the top, fonts that change the size of the text as they load, and a cookie banner that pushes the page down instead of sitting over it. The shift tends to land on the call to action, the one button the page exists for.
How to improve it
- Every image, video and embed has set dimensions or an aspect ratio.
- Banners, bars and notices sit in reserved space or float over the content without pushing it.
- Fonts load so that the fallback and the real font take up almost the same space.
- Nothing is inserted above content already on screen unless the visitor asked for it.
We check CLS on both phone and desktop as part of our website speed optimisation work, because shifts often appear at only one screen size.