What is Cumulative Layout Shift (CLS)?

How it works

Each time a visible element moves from one rendered frame to the next without the user causing it, the browser records a layout shift. Its score is the impact fraction (how much of the viewport the moving elements affect) multiplied by the distance fraction (how far they moved relative to the viewport).

Shifts are grouped into session windows: bursts of shifts less than one second apart, capped at five seconds. The page's CLS is the score of its worst session window, not the total over the whole visit, so long-lived pages are not penalized just for staying open.

Shifts that happen within 500 milliseconds of a click, tap, or key press are excluded, because the user expects the page to change. Animations using CSS transform do not count as layout shifts.

Example

An image with no dimensions takes up zero height until it downloads, then pushes everything below it down:

<!-- Causes a shift -->
<img src="dripper.webp" alt="Pour-over dripper">

<!-- Reserves space -->
<img src="dripper.webp" width="800" height="600" alt="Pour-over dripper">

With width and height set, the browser computes the aspect ratio and reserves the space before the file arrives, as long as the CSS uses height: auto. The same principle applies to ads, embeds, and banners: give their containers a min-height or aspect-ratio before content loads into them.

In WordPress

WordPress adds width and height to images inserted through the editor, which prevents the most common cause. Shifts on WordPress sites usually come from ad slots with no reserved space, cookie and promo banners injected at the top of the page, web fonts swapping in with different metrics, embeds, and sliders that initialize after load. Plugins that insert content with JavaScript after render are worth checking. The hydrogenseo.com web vitals checker reports CLS for any URL.

Common mistakes

• Images and iframes without dimensions.
• Banners inserted above content after the page renders.
• Font swaps without size-adjust or fallback font metrics.
• Animating top or height instead of transform.