Definition

What Is CLS (Cumulative Layout Shift)?

A Core Web Vital that measures unexpected layout shifts during page load — when elements move as assets load, disrupting user interaction. Google recommends a score below 0.1.

Related Terms

Core Web Vitals

LCP

Page Speed

Accessibility (A11y)

Above the Fold

Example

A page where a banner ad loads late and pushes the CTA button down has high CLS — the user clicks in the wrong place before content settles.

Google data shows that pages meeting the 'Good' CLS threshold (under 0.1) have a 24% lower abandonment rate than pages with 'Poor' CLS (above 0.25) — demonstrating a direct link between visual stability and user retention.

Synonyms:

Cumulative Layout Shift

Acronyms:

CLS

What it applies to

Every page, but particularly pages with images, ads, embedded content, or dynamically injected elements that load after the initial HTML render.

How to diagnose CLS

  • Run Google PageSpeed Insights — the CLS section shows the score and flags contributing elements.
  • Open Chrome DevTools → Performance tab → record a page load. Layout shifts are highlighted as red bars in the Experience lane, with the shifting elements identified in the details panel.
  • Enable "Layout Shift Regions" in Chrome DevTools → Rendering panel — shifting elements are highlighted in blue as they move during page load.

How to fix CLS

  • Images without dimensions: Always set explicit width and height attributes on <img> tags. The browser reserves the correct space before the image loads, preventing the page from reflowing. In CSS: aspect-ratio: 16 / 9; is an alternative approach.
  • Late-loading ads or embeds: Reserve space using a container with a fixed min-height matching the expected ad or embed size.
  • Web fonts causing FOUT: Use font-display: optional to avoid text reflow, or match the fallback font metrics closely to the web font to minimise layout shift on swap.
  • Dynamically injected banners: Never inject content above existing page content after load. If a banner must appear, reserve its space in the initial layout.

CLS: Common Questions Answered

Question

Answer