Visual Stability: CLS

You go to tap a button and the page jumps. Now you have tapped an ad. That small betrayal has a metric: Cumulative Layout Shift measures how much content moves unexpectedly while a page loads, and it is one of the three Core Web Vitals.

What CLS measures

Cumulative Layout Shift, or CLS, measures unexpected movement of visible content while the page loads. The key word is unexpected. When a late image pushes the paragraph you were reading down the screen, or a button slides under your finger as you go to tap it, the reader loses their place or mis-taps. CLS puts a number on that experience so you can measure it and fix it, instead of trusting a page that only looks stable on your fast connection.

How the score works

CLS is unitless. Each individual shift scores as the impact fraction times the distance fraction: how much of the viewport moved, multiplied by how far it moved. Those shifts are not simply added across the whole visit. Instead they are summed within a session window, a burst of shifts within 1 s of each other, capped at 5 s, and CLS reports the worst such window. That design matters: it means a handful of separate small jumps spread across a long session do not pile up into one bad score. You are judged by your worst burst, not your total.

Good is 0.1 or less at the 75th percentile of real loads. One more rule keeps the metric honest: shifts that happen within 500 ms of a user interaction count as expected and are excluded. If the reader clicks a control and the page moves as a result, that is a response, not a betrayal, so it does not count against you.

CLS reports the worst burst of unexpected shifts in a session window, not the running total. Small jumps spread out do not add up, and anything within 500 ms of a click is treated as expected.

What causes layout shift

The causes are a short and repeating list. Learn them and you catch most shifts before they ship.

• Images and video with no dimensions: the browser reserves no space until the file loads, then reflows everything below it.
• Ads, embeds, and iframes with no reserved space: third-party content arrives late and shoves the page around.
• Content inserted above existing content: a banner or notice pushed in at the top moves everything the reader was already looking at.
• Web fonts that cause reflow: a swap from fallback to web font changes text metrics and re-lays the paragraph.
• Animating layout properties: animating top, left, orwidth moves surrounding content on every frame, while transform does not.

How to prevent it

Reserve the space before the content arrives. Set explicit width and height attributes, or an aspect-ratio, on every image and video so the browser holds the box from the first layout. Width, height, aspect-ratio →

For ads, embeds, and iframes, reserve space with a fixed min-height sized to the expected content. Do not insert content above existing content except as a direct response to an interaction, when the shift is excluded anyway. For fonts, preload the web font and match the fallback metrics so the swap does not reflow the text; font and image loading here overlaps directly with the work you do for largest paint. Font and image loading overlaps LCP →

When you animate, use transform only, since it moves pixels without moving the layout around them. Stability is one leg of the experience. The last leg is how fast the page answers when the reader actually does something. Interactivity next →