CLS Prevention Guide: Stop Layout Shifts That Hurt AI

What Is CLS and How It Relates to AI SEO

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that quantifies how much visible content unexpectedly moves during page load. Every time an element shifts position without user interaction, it contributes to the CLS score. A page where nothing moves has a CLS of 0. A page where a large banner pushes content down after 2 seconds has a high CLS score.

For AI SEO, CLS matters differently than LCP or FCP. AI crawlers do not visually render pages — they parse HTML and extract content. A layout shift that annoys a human user does not directly confuse an AI bot. However, CLS impacts AI visibility through two indirect pathways:

1. Google ranking signals. Core Web Vitals are confirmed ranking factors. Poor CLS contributes to lower Google rankings, which shrinks the pool of content AI models consider when building their source lists. Since AI models like ChatGPT and Gemini frequently draw from Google-indexed and Google-ranked content, your position in that pool matters.

2. Structural indicators. High CLS often reveals deeper technical issues — missing image dimensions, late-injected JavaScript content, and poorly managed third-party scripts. These same issues can affect how AI crawlers parse your page structure and extract meaningful content.

Understanding CLS in the context of all Core Web Vitals for AI SEO gives you the complete picture of how performance metrics work together to influence AI visibility. For a broader introduction, see What Is AI SEO.

CLS Thresholds and Measurement

Google defines three CLS categories:

• Good: 0.1 or less
• Needs Improvement: 0.1 to 0.25
• Poor: Above 0.25

CLS is calculated by multiplying two factors for each layout shift: the impact fraction (how much of the viewport was affected) by the distance fraction (how far the element moved). All individual shift scores are accumulated into session windows, and the largest session window becomes your CLS score.

A practical example: if a 300px-tall banner pushes all content below it down by 300px on a 900px viewport, the impact fraction is about 0.67 (600px of viewport affected divided by 900px) and the distance fraction is 0.33 (300px shift divided by 900px). The shift score is 0.67 x 0.33 = 0.22 — already in the "needs improvement" range from a single shift.

This is why layout shifts from large elements (hero images, ad slots, embedded videos) are so damaging: they affect a large portion of the viewport and push content significant distances.

Image and Video Dimensions

Missing width and height attributes on images and videos are responsible for approximately 35% of all CLS issues. When the browser encounters an <img> tag without dimensions, it cannot reserve space for the image before it loads. Once the image arrives, it pushes surrounding content out of the way.

The fix

Always include explicit width and height attributes:

<img src="/photo.webp" alt="Description" width="800" height="450">

For responsive images, these attributes define the aspect ratio, not the display size. CSS can still control the rendered size:

img {
  max-width: 100%;
  height: auto;
}

The browser uses the width/height ratio to calculate how much space to reserve, regardless of the actual display size. This eliminates the shift.

The CSS aspect-ratio alternative

For more complex cases, use the CSS aspect-ratio property:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

This reserves the correct proportional space for embedded videos, iframes, and other elements where HTML width/height attributes may not be practical.

Background images

CSS background images do not cause CLS by themselves because their container already has defined dimensions. However, if the container uses dynamic sizing (like height: auto with no min-height), the container can collapse to zero height when empty and expand when content loads, causing shifts.

Dynamic Content and Injected Elements

Dynamically injected elements — ads, cookie consent banners, notification bars, and late-loading widgets — are the second most common CLS culprit, accounting for about 25% of issues.

Ads and third-party embeds

Ad slots that load after the initial page render will shift content unless space is reserved. The solution:

.ad-slot {
  min-height: 250px; /* Match expected ad height */
  width: 300px;
}

For responsive ad slots, use aspect-ratio or a percentage-based padding hack:

.ad-slot-responsive {
  aspect-ratio: 300 / 250;
  width: 100%;
  max-width: 300px;
}

Cookie consent and notification banners

Banners that insert themselves at the top of the page and push content down cause severe CLS. Two approaches prevent this:

Overlay approach: Position the banner as position: fixed or position: sticky so it overlays content rather than pushing it. This causes zero layout shift.

Transform approach: If the banner must be inline, use CSS transforms to animate it in:

.cookie-banner {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.cookie-banner.visible {
  transform: translateY(0);
}

Transforms do not trigger layout recalculations, so they produce no CLS.

Late-loading embeds

Social media widgets, video players, and chat widgets often load asynchronously and expand from zero height. Always wrap these in containers with predefined dimensions:

<div style="min-height: 400px; aspect-ratio: 16/9;">
  <iframe src="https://youtube.com/embed/..." loading="lazy"></iframe>
</div>

Font Loading and Text Stability

Web fonts cause CLS when the text rendered in a fallback font gets replaced by the web font with different metrics. This replacement causes text to reflow — lines break at different points, paragraphs change height, and surrounding elements shift.

The font-display: swap problem

While font-display: swap is recommended for LCP (it prevents invisible text), it can cause CLS if the fallback and web fonts have different dimensions. The text shifts when the swap occurs.

The solution: font metric overrides

Use CSS @font-face descriptors to match your fallback font's metrics to your web font:

@font-face {
  font-family: 'YourFont';
  src: url('/fonts/yourfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'YourFont-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  font-family: 'YourFont', 'YourFont-Fallback', sans-serif;
}

The size-adjust, ascent-override, descent-override, and line-gap-override properties adjust the fallback font to closely match the web font's metrics. When the swap happens, the text barely moves.

Tools like Fontaine and Next.js's built-in font optimization automate this metric matching process.

CSS Best Practices for Layout Stability

Beyond the specific fixes above, these CSS practices help maintain layout stability:

Use contain: layout on independent sections

The CSS contain property tells the browser that an element's internals do not affect outside layout:

.card, .sidebar, .widget {
  contain: layout;
}

This means if content inside the element shifts, it does not propagate to surrounding elements.

Avoid top/left animations for layout elements

CSS properties like top, left, width, and height trigger layout recalculations. Use transform instead:

/* Bad: triggers layout shift */
.element { top: 100px; transition: top 0.3s; }

/* Good: no layout shift */
.element { transform: translateY(100px); transition: transform 0.3s; }

Set min-height on dynamic containers

Any container that receives dynamically loaded content should have a min-height:

.comments-section { min-height: 200px; }
.related-posts { min-height: 300px; }

This reserves space even before the content loads, preventing shifts when it arrives.

Avoid insertBefore for above-the-fold content

JavaScript that inserts elements above existing content using insertBefore or prepend will shift everything below. If you must inject content above the fold, do it before the initial render or use absolute/fixed positioning.

Testing and Monitoring CLS

CLS is one of the trickier metrics to test because it accumulates over the page's lifetime, including after initial load. Here are the tools and approaches:

Lab testing:

• Chrome DevTools Performance panel — Record a page load and look for "Layout Shift" entries in the Experience track. Each shift shows the affected elements and shift score.
• Lighthouse — Provides a CLS score and identifies the elements causing the largest shifts.
• WebPageTest — Shows a filmstrip view where you can visually spot layout shifts frame by frame.

Field data:

• Chrome User Experience Report (CrUX) — Shows the 75th percentile CLS from real Chrome users visiting your site.
• Google Search Console — The Core Web Vitals report flags pages with CLS issues.
• Web Vitals JS library — Add to your analytics to track real-user CLS data.

Automated monitoring: Set up Lighthouse CI to run on every deployment and flag CLS regressions before they reach production. This is especially important because a single CSS change or new ad script can introduce CLS that goes unnoticed without automated checks.