Cumulative Layout Shift (CLS)
How much visible content jumps around unexpectedly while a page loads. 0.1 or less is good; above 0.25 is poor. Movement the visitor caused — opening a menu, expanding an accordion — is excluded.
Also called: CLS
Short answers, before the detail
What is Cumulative Layout Shift (CLS)?
How much visible content jumps around unexpectedly while a page loads. 0.1 or less is good; above 0.25 is poor. Movement the visitor caused — opening a menu, expanding an accordion — is excluded.
What does Cumulative Layout Shift (CLS) look like in practice?
It is the reason you tap the wrong button when an image loads late. On a booking form or a QR landing page, that mistap is a lost lead outright — and the fix is usually just setting image dimensions.
Where does Cumulative Layout Shift (CLS) fit?
Web Development & Performance — How websites are built, hosted, and measured, including the speed metrics Google grades every page against.
In practice It is the reason you tap the wrong button when an image loads late. On a booking form or a QR landing page, that mistap is a lost lead outright — and the fix is usually just setting image dimensions.
What CLS measures
Cumulative Layout Shift scores how much visible content moves around unexpectedly while a page loads. It is the metric behind an experience everybody recognizes: you go to tap a link, an image finishes loading above it, the page jumps, and you tap an ad instead.
Unlike the other Core Web Vitals it is not measured in seconds. It is an unitless score combining how much of the screen moved with how far it travelled.
Thresholds
- Good: 0.1 or less
- Needs improvement: 0.1 to 0.25
- Poor: over 0.25
Measured at the 75th percentile of real visits.
Shifts that don’t count
Movement the visitor caused is excluded. Opening an accordion, expanding a menu, or triggering an animation by clicking does not count against you.
CLS only penalizes shifts the visitor did not ask for and could not anticipate — which is exactly the right line to draw.
The five usual causes
Images without dimensions. If the browser does not know how tall an image will be, it reserves no space and everything below jumps when it arrives. Setting width and height attributes lets the browser hold the space from the start. This single fix resolves most CLS problems on small business sites.
Ads, embeds, and iframes. Review widgets, map embeds, and booking iframes load late and push content down. Give the container a fixed minimum height matching what will land there.
Web fonts swapping. Text first renders in a fallback font, then reflows when the real font arrives. Choosing a fallback with similar metrics, and self-hosting so the font arrives sooner, both reduce the jolt.
Content injected above existing content. Cookie banners, promo bars, and shipping notices that appear at the top after the page has rendered shove everything down. Reserve their space or overlay them instead.
Late-loading elements generally. Anything that appears after first paint without reserved space is a candidate.
Why it is worth more than the score suggests
CLS has the weakest direct ranking effect of the three Core Web Vitals, and it is still worth fixing first — because it is the one visitors consciously notice and resent.
A page that jumps while someone is reading it reads as amateur, regardless of how good the content is. On a QR landing page or a form where you are asking someone to take an action on a phone, a mistap is a lost lead outright.
The fixes are also unusually cheap. Adding image dimensions and reserving space for embeds is an afternoon’s work with no design consequences.
Related terms
Now that you know what it means — should you be paying for it?
Not every term in this glossary is worth money to every business. Tell us what you are being sold and we will tell you straight whether it is worth it for you.