CLS (Cumulative Layout Shift)
Short definition
CLS is the Core Web Vitals stability score that measures how much visual elements unexpectedly shift while a page is loading.
When an image or ad slot loads late and pushes text downward while the page renders, that movement counts towards CLS. The score multiplies how large the shifting area is by how far it moves, and the aim is a value close to zero.
It appears in PageSpeed Insights and Search Console. The official threshold is 0.1: under that is good, 0.1 to 0.25 needs improvement, above that is poor. Reserving space for images in advance largely prevents this shifting.
It is often confused with page speed, but CLS is about stability, not speed; a page can load fast and still score poorly on CLS if elements jump around while rendering.
The most common mistake is injecting a cookie consent bar or promotional banner at the top of the page after it has already rendered, which pushes all the content beneath it downward and badly damages CLS. The correct approach is to reserve a fixed height for such components in advance or to overlay them so they never push the existing content flow.
Why it matters
If a button moves right as a visitor is about to tap it, they hit the wrong thing, which breeds distrust and abandonment. Keeping CLS low prevents mistaken clicks during forms, baskets and checkout.
Illustrative example
On a spa chain's pricing page, a late-loading banner pushed text down and visitors kept tapping the wrong package; giving the banner slot a fixed height stopped the shift.
