CLS: What It Means and How to Fix It

Cumulative Layout Shift (CLS) is the Core Web Vital that measures visual stability — how much things move around on your page as it loads. It's also the easiest CWV to fix once you know the patterns to look for.

What CLS measures

Every time an element on your page moves unexpectedly, Chrome calculates a layout shift score. CLS is the sum of those shifts across the lifetime of the page session.

A shift is "unexpected" if it happens without user input. If a user taps a button and a menu opens, that's not CLS. If an ad loads three seconds in and pushes everything down, that is CLS.

The score is dimensionless but roughly equals: (fraction of viewport affected) × (distance shifted as fraction of viewport).

The thresholds

These are measured at the 75th percentile of real users.

The 5 most common causes of CLS

1. Images without dimensions

This is the #1 cause. When you write:

<img src="/photo.jpg" alt="...">

…the browser doesn't know how tall the image will be until it downloads. Until then, the space is empty. When the image arrives, everything below it gets pushed down.

Fix: Always set width and height:

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

Modern browsers use these attributes to calculate aspect ratio and reserve space before the image arrives. Same for <video> and <iframe>.

2. Ads, embeds, and iframes

A late-loading ad slot pushes content down when it finally renders.

Fix: Reserve space with CSS aspect-ratio or min-height:

.ad-slot {
  min-height: 250px;
  aspect-ratio: 16 / 9;
}

If you don't know the size in advance, use a placeholder skeleton.

3. Custom fonts (FOIT / FOUT)

When a custom font loads, text can swap from the fallback to the custom font. If the metrics are different, the layout shifts.

Fix:

• Use font-display: optional so the swap doesn't happen at all.
• Or use font-display: swap with a similar fallback (set with size-adjust and ascent-override to match metrics).
• Preload critical fonts: <link rel="preload" as="font" type="font/woff2" crossorigin>.
• Self-host fonts to avoid CDN latency.

4. Content injected above existing content

Cookie banners, newsletter pop-ups, "now hiring" bars — anything that loads asynchronously and inserts above the user's current viewport position causes a shift.

Fix: Either render these on the server with placeholder space reserved, or render them as overlays (position: fixed) so they don't affect layout.

5. Animations that move layout

Animating width, height, top, or left triggers layout recalculations on every frame. If those happen unexpectedly, they count as CLS.

Fix: Animate transform and opacity instead. These are GPU-composited and don't trigger layout.

/* ❌ Causes layout shift */
.menu { transition: height 0.3s; }

/* ✅ No layout shift */
.menu { transition: transform 0.3s; }

How to debug CLS

In Chrome DevTools:

1. Open Rendering panel (Cmd+Shift+P → "Show Rendering").
2. Enable Layout Shift Regions.
3. Reload the page. Any element that shifts will flash purple — you'll see exactly what's moving.

You can also check the PageSpeed Insights report — it lists specific elements that contributed to your CLS score with screenshots.

Verifying your fix

After making changes:

1. Run a free Lighthouse audit and check the CLS metric.
2. Look at the "Avoid large layout shifts" diagnostic.
3. Test on mobile specifically — many CLS issues only appear on small screens where text wraps differently.

A target of 0 to 0.05 is realistic for well-built sites. If you're under 0.1, you pass Core Web Vitals.

Common gotchas

• Dimensions in CSS aren't enough. You need width and height HTML attributes for the browser to reserve space before CSS loads.
• Responsive images still need dimensions. Use the intrinsic dimensions; CSS like width: 100%; height: auto; does the right thing as long as the attributes are set.
• Lazy-loaded images still need dimensions. Otherwise they shift when they enter the viewport.
• CLS is measured across the entire page session. A modal that opens 30 seconds in can still contribute to CLS.

The bottom line

CLS is the easiest Core Web Vital to fix. Set width and height on every image, video, and iframe. Reserve space for ads and embeds. Animate transform instead of layout properties.

Once you understand the patterns, getting CLS to 0 is mostly mechanical. After that, focus on LCP and INP — the other two Core Web Vitals.