CLS (Cumulative Layout Shift)

Key Definition

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that quantifies how much visible page content shifts unexpectedly during loading and interaction. A CLS score of 0 means no layout elements moved — the page was perfectly stable. Higher scores indicate more disruptive shifts, such as text jumping down when an ad loads above it, or buttons moving when images pop in without reserved space. Google considers a CLS of 0.1 or less as "good." CLS is one of three Core Web Vitals alongside LCP (loading) and INP (responsiveness) that serve as Google ranking signals.

Why It Matters for AI SEO

CLS affects AI SEO indirectly but meaningfully through two mechanisms.

First, CLS is a Google ranking signal. Pages with poor CLS scores receive lower Google rankings, which reduces the likelihood of your content being discovered during the web search phase of AI retrieval. Many AI models — including Google Gemini and Perplexity — use web search results as a starting point for source selection. Lower Google rankings mean fewer opportunities for AI retrieval.

Second, the technical issues that cause high CLS scores often indicate broader problems with page structure and code quality. Dynamically injected content, improperly loaded JavaScript, and missing image dimensions signal a codebase that may also have issues with server-side rendering, semantic HTML, and structured data — all of which directly affect AI crawler access. Fixing CLS often leads to broader improvements in technical health that benefit AI visibility.

While AI crawlers themselves do not experience layout shifts (they do not render pages visually), a page with perfect CLS is typically a page that is well-built, fast, and properly structured — qualities that align strongly with AI-friendly content delivery.

How It Works

CLS is calculated by multiplying two factors for each layout shift event: the impact fraction (how much of the viewport was affected) and the distance fraction (how far the elements moved). These individual shift scores are accumulated across the page's entire lifetime, with the largest cluster of shifts within a 5-second window determining the final CLS score.

For example, if a 300-pixel-tall ad loads above your main content and pushes everything down by 300 pixels on a 900-pixel viewport:

• Impact fraction = affected area / viewport = ~66%
• Distance fraction = distance moved / viewport = ~33%
• Layout shift score = 0.66 x 0.33 = 0.22 (already in "needs improvement" territory from a single shift)

Common causes of layout shifts include:

Images and videos without dimensions. When the browser encounters an <img> tag without width and height attributes, it does not know how much space to reserve. The image loads late and pushes surrounding content down.

Dynamically injected content. Ads, cookie banners, newsletter popups, and promotional bars that insert themselves above or between existing content cause everything below to shift downward.

Web font loading (FOUT/FOIT). When a custom font loads and replaces the fallback font, differences in letter spacing and line height can cause text to reflow, shifting surrounding elements.

JavaScript-driven content. Client-side JavaScript that inserts or resizes elements after initial page render causes shifts. This includes dynamically loaded product recommendations, social proof widgets, and A/B testing scripts.

Practical Implications

• Set explicit dimensions on all images and videos. Always include width and height attributes on <img> and <video> elements, or use CSS aspect-ratio. This lets the browser reserve the correct space before the media loads.
• Reserve space for ads and dynamic content. If your page includes ads or dynamically loaded sections, use CSS to define minimum heights for their containers so content below does not shift when they load.
• Preload custom fonts. Use <link rel="preload" as="font"> and font-display: optional or font-display: swap with size-matched fallback fonts to minimize the impact of font loading on layout stability.
• Avoid inserting content above existing content. Never inject banners, alerts, or notifications above the main content area after page load. If dynamic content must appear, place it below the fold or use fixed/sticky positioning that does not affect document flow.
• Test CLS on real devices. Lab tools (Lighthouse) may not catch all CLS issues because they do not load ads or third-party scripts. Use Chrome User Experience Report (CrUX) data or real user monitoring (RUM) to measure actual field CLS.
• Audit third-party scripts. Ad networks, analytics tools, chat widgets, and social media embeds are common CLS culprits. Audit each third-party script for its impact on layout stability and consider lazy-loading non-essential third-party resources.