CLS

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures the visual stability of a page. It quantifies how much visible content unexpectedly shifts during the page’s lifetime. CLS is calculated by multiplying the impact fraction (how much of the viewport is affected) by the distance fraction (how far the elements move). A good CLS score is 0.1 or less, measured at the 75th percentile of page loads.

Why It Matters for SEO

CLS is one of the three Core Web Vitals metrics that Google uses as a ranking signal. Pages with poor CLS scores provide a frustrating user experience — buttons move as users try to click them, text jumps while being read, and content shifts unexpectedly as resources load. These layout shifts lead to accidental clicks, higher bounce rates, and reduced user trust.

Beyond rankings, poor CLS directly affects conversion rates. Users who experience layout shifts are more likely to abandon forms, misclick on ads instead of content, and leave the site entirely. Fixing CLS issues improves both search visibility and business metrics.

How to Fix CLS Issues

The most common cause of CLS is images and embeds without explicit dimensions. Always include width and height attributes on images and video elements so the browser can reserve the correct space before the resource loads. Use CSS aspect-ratio for responsive containers.

Avoid inserting content above existing content after the page has started rendering. Banners, cookie notices, and dynamically injected elements should either be positioned in reserved space or use overlay positioning that does not push content down. For web fonts, use font-display: swap with size-adjusted fallback fonts to minimize the layout shift when custom fonts load.

Avoid dynamically resizing ads or embeds. Reserve fixed dimensions for ad slots and use placeholder containers for third-party embeds. If content must load asynchronously, use skeleton screens or placeholder elements that match the final dimensions.

Common Mistakes

• Not setting image dimensions: This is the single most common CLS issue. Every <img> tag should have explicit width and height or be wrapped in a container with a defined aspect ratio.
• Injecting banners above content: Top-of-page banners that push content down after load are a major CLS source. Use sticky positioning or reserved space instead.
• Loading web fonts without fallback sizing: When a custom font loads and has different metrics than the fallback, all text on the page can shift. Use size-adjust in your @font-face declarations.
• Ignoring CLS on specific interactions: CLS is measured across the full page lifecycle, including user-triggered layout shifts within 500ms of an input. Test beyond initial page load.
• Only testing on fast connections: CLS issues often manifest more severely on slower connections where resources load incrementally. Test with throttled network conditions.

CLS is often the easiest Core Web Vital to fix because the causes are well-defined and the solutions are straightforward CSS and HTML changes.