Cumulative Layout Shift (CLS)

Understanding Cumulative Layout Shift (CLS)

CLS quantifies how much the visible content of a page moves around unexpectedly after the initial render. Every time an element shifts position without user interaction, it contributes to the CLS score. The metric multiplies the fraction of the viewport affected by the shift and the distance the element moved, then sums all layout shifts that occur during the page session.

Common causes of layout shift include: images and videos without dimensions (the browser does not know how much space to reserve until they load), dynamically injected content (ads, banners, or embeds that push content down after the page loads), web fonts that cause text reflow (text renders in a fallback font then jumps when the custom font loads), and DOM elements inserted above existing content.

Google measures CLS using real user data from Chrome, looking at the worst layout shift cluster during the page session. This means even a single bad layout shift can affect your score, and the impact is measured from real visits, not just lab tests.

Why Cumulative Layout Shift (CLS) Matters

CLS is a confirmed Google ranking factor as part of Core Web Vitals. Pages with poor CLS scores (above 0.25) are at a ranking disadvantage and provide a frustrating user experience. Users who click a link only to have the page shift and cause a misclick are likely to bounce — creating both UX and SEO problems.

CLS is often the easiest Core Web Vital to fix because the solutions are straightforward: set dimensions on media, reserve space for dynamic content, and use font-display strategies. Many sites can achieve a perfect CLS score with a few targeted fixes.

Best Practices

• Always set explicit width and height attributes on images and video elements
• Reserve space for ads and dynamic embeds using CSS aspect-ratio or min-height containers
• Use font-display: swap or font-display: optional to control web font loading behavior
• Avoid inserting content above existing visible content after the page has loaded
• Preload critical web fonts to minimize the flash of unstyled text (FOUT) that causes layout shifts
• Test CLS on real devices and connections — lab tools may not capture all real-world shift scenarios