Cumulative Layout Shift Test

Cumulative Layout Shift (CLS) measures the total amount that visible elements move around unexpectedly while your page loads. Layout shifts cause users to misclick and feel the page is unstable, and CLS is one of Google's Core Web Vitals and a direct ranking factor.

Why CLS matters

Few user experience problems are as universally frustrating as a button that moves just as the user is about to tap it. CLS quantifies exactly that frustration: the larger and more frequent the unexpected movements, the higher the score and the worse the experience. Google's recommended threshold for a "good" experience is CLS at or under 0.1 at the 75th percentile of users.

The fundamental cause of layout shift is the browser learning the size of an element only after it has already laid out the rest of the page. The fix is to give the browser everything it needs to reserve the correct space upfront: explicit width and height attributes on images, aspect-ratio CSS for responsive containers, fixed-size containers for ads and embeds, and font-loading strategies that do not change line heights when the custom font finally loads. With these in place, late-arriving content fits into its reserved slot rather than pushing other content around.

Common causes of poor CLS

• Images without explicit dimensions: add width and height attributes (or set aspect-ratio in CSS) so the browser reserves the slot before the image loads.
• Late-loading web fonts: use font-display: swap with matched fallback metrics so swapping the font does not change line heights.
• Aggressively injected cookie consent banners: render them as a fixed overlay rather than as a block element pushing content down.
• Ads or embeds inserted without reserved space: reserve a fixed-size container for each slot.
• Animations on layout-affecting properties: animate transform and opacity instead of top, left, or height.

This test measures your page's CLS and identifies the elements that contribute most to the score. The fix guide below covers reserving space for images, web font loading strategies, handling cookie banners and ads, and animation patterns that do not trigger layout shift.