Cumulative Layout Shift (CLS)
Definition: Cumulative Layout Shift (CLS) is a Core Web Vitals metric that scores how much visible content unexpectedly moves while a page is open; a score of 0.1 or less is considered good.
Also called: CLS, layout shift
Updated
A familiar scenario
You go to tap “Continue”, and at that moment a banner loads above the button and pushes it down. Your tap lands on something else. That is a layout shift, and CLS is the metric that measures how much of it a page does.
How the score is calculated
Each unexpected shift gets a score based on how much of the viewport moved and how far it moved. Shifts are grouped into bursts, called session windows, that last at most five seconds with gaps of under one second between shifts. CLS is the score of the worst burst during the visit (web.dev). Shifts that happen within half a second of a user’s tap or key press do not count, because the user expected something to change.
A score of 0.1 or less is good and above 0.25 is poor, at the 75th percentile of visits.
The usual causes and their fixes
| Cause | Fix |
|---|---|
| Images and videos without dimensions | Set width and height attributes, or a CSS aspect-ratio, so the browser reserves the space |
| Ads, embeds and iframes that load late | Reserve a fixed slot with a minimum height |
| Content injected above existing content, such as cookie or promo banners | Overlay it, or reserve space for it from the start |
| Web fonts swapping in with different metrics | Use fallback fonts with matched metrics, or size-adjust |
Animations can also cause shifts if they change layout properties such as top or height. Animating transform instead does not move other content.
Our view: CLS is usually the cheapest Core Web Vital to fix, because most causes are a missing dimension or a banner in the wrong place. The Core Web Vitals checker reports field CLS and the elements that shifted in the lab run.