What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a Core Web Vital that measures visual stability. It tracks how much page content unexpectedly moves during the page load. A good CLS score is 0.1 or less. Layout shift happens when images without dimensions load, ads inject, fonts swap, or dynamic content appears.

What causes layout shift on websites?

Common causes include: 1) Images and videos without width/height attributes, 2) Ads, embeds, and iframes without reserved space, 3) Web fonts causing text to resize (FOUT), 4) Dynamically injected content like cookie banners, 5) CSS animations that change height, width, or margin properties.

How do I fix layout shift?

To fix CLS: 1) Always include width and height on images and videos, 2) Reserve space for ads with min-height, 3) Use font-display: swap with size-adjusted fallback fonts, 4) Never insert content above existing content without reserving space, 5) Use CSS transform for animations instead of layout properties.

What is a good CLS score?

Google considers CLS 'good' when it's under 0.1. Between 0.1 and 0.25 needs improvement. Above 0.25 is poor. Google measures CLS using real field data at the 75th percentile from the Chrome User Experience Report.

CLS Visualizer: See and Fix Layout Shift in Real-Time

Bad CLS

—

→

Fixed CLS

—

❌ Without Fix

The quick brown fox jumps over the lazy dog.

This text will shift when a custom font loads.

✅ With Fix

The quick brown fox jumps over the lazy dog.

This text stays perfectly still during font load.

🖼️ Why images cause layout shift

When an <img> tag has no width and height, the browser allocates zero space for it. The moment the image downloads, everything below it gets shoved down. This is the #1 cause of CLS on the internet.

The fix: Always include width and height attributes. The browser uses them to calculate the aspect ratio and reserves the correct space before download.

<!-- Bad: zero space reserved -->
<img src="hero.webp" alt="Product">

<!-- Good: space reserved immediately -->
<img src="hero.webp" alt="Product"
     width="800" height="450">

📢 Why ads cause layout shift

Ad networks inject content asynchronously. The ad slot starts empty, then a 250px banner appears and pushes your entire article down. Your reader was mid-paragraph — now they've lost their place.

The fix: Set min-height on the ad container matching the expected ad size. The space is always reserved, ad or not.

/* Reserve space for a medium rectangle ad */
.ad-container {
    min-height: 250px;
    width: 300px;
    background: #f8f8f8;
}

🔤 Why font loading causes layout shift

With font-display: swap, the browser renders text in a fallback font first, then re-renders when the custom font loads. If the custom font has different character widths, everything reflows.

The fix: Use size-adjust on your fallback font to match the custom font's dimensions. The swap still happens, but the text barely moves.

@font-face {
    font-family: 'CustomFont-Fallback';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22%;
}

🍪 Why cookie banners cause layout shift

Cookie consent banners often get inserted at the very top of the page after JavaScript loads. Everything below them shifts down by the banner height. GDPR compliance shouldn't mean terrible CLS.

The fix: Use CSS transform: translateY() to animate the banner in, or reserve space at the top of the page from the start.

/* Bad: pushes content down */
.banner { position: relative; top: 0; }

/* Good: slides in without affecting layout */
.banner {
    position: fixed; /* or use transform */
    top: 0; left: 0; right: 0;
    z-index: 999;
}

💀 The worst-case scenario

This is what happens when a page has ALL the common CLS problems at once: an ad loads without reserved space, an image has no dimensions, a cookie banner pushes everything down, and fonts swap with different metrics. The CLS score hits 0.45+ which is catastrophic.

The good news: Every single one of these fixes takes under 5 minutes. The right pane shows the exact same page with all fixes applied — CLS drops to nearly zero.

Read the full guide: How to Fix CLS (Cumulative Layout Shift)

CLS Score Thresholds

≤ 0.1

Good

0.1 – 0.25

Needs Improvement

> 0.25

Poor

Common CLS Fixes

1. Add Image Dimensions

Set width and height on every <img> tag. Browser reserves space automatically.

2. Reserve Ad Space

Use min-height on ad containers. A 300×250 ad needs a container with min-height: 250px.

3. Fix Font Loading

Use font-display: swap with size-adjust fallback to prevent text reflow.

4. Use CSS Transforms

Animate with transform and opacity — they don't trigger layout recalculations.

5. Set Iframe Dimensions

YouTube embeds, maps, payment forms — all iframes need explicit width and height.

6. Use aspect-ratio

Can't set dimensions? Use CSS aspect-ratio: 16/9 for responsive containers that hold space.

Check Your Site's CLS Right Now

VitalsFixer scans your page and shows exactly which elements are shifting and how to stop them. Free, instant, no signup.

Analyze My Site Free →

Can't fix it yourself? We'll handle it.

Our engineers fix layout shift, image optimization, and all three Core Web Vitals. 48-hour turnaround. Full refund if your scores don't improve.

View Expert Fix Service →

CLS Visualizer: See Layout Shift Happen