Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a Core Web Vital that measures the visual stability of a page by summing the layout shift scores of unexpected movements of visible elements during the page's lifetime.

Cumulative Layout Shift (CLS) is a Core Web Vital that measures the visual stability of a page by summing the layout shift scores of unexpected movements of visible elements during the page's lifetime.

Learn more in our how to improve CLS guide, or work with us through our done-for-you speed optimization service.

Metric	Good	Needs Improvement	Poor
CLS	≤ 0.1	0.1, 0.25	> 0.25

CLS is reported as a unitless score computed from the impact fraction and distance fraction of each shift, captured via the Layout Instability API and aggregated in CrUX using a session-window model.

Most CLS problems are fixed with a small, disciplined checklist:

• Set explicit width and height on all images and embeds (or use CSS `aspect-ratio`), so the browser reserves the correct space before the resource loads. Missing image dimensions are the single most common CLS cause.
• Reserve space for ads, banners, and dynamic widgets with a `min-height` matching the expected size, so injected content does not push page content down when it arrives.
• Use `font-display: swap` with size-adjusted fallback fonts (`size-adjust`, `ascent-override`, `descent-override` on the fallback `@font-face`) so text does not reflow when the webfont finally loads.
• Never inject content above existing content. Cookie banners, promo bars, and app-install prompts should push down from the top of the viewport as an overlay, or reserve their space in the layout from the initial paint.
• Animate with `transform` and `opacity`, not layout properties. Changes to `width`, `height`, `top`, `left`, or `margin` trigger layout and can cause shifts; `transform` runs on the compositor and cannot.