CLS Layout Shift Causes and Fixes — Cumulative Layout Shift Guide

Fixing Cumulative Layout Shift (CLS)

CLS measures the total of all unexpected layout shift scores during the page's lifecycle. A layout shift happens when a visible element changes position between two rendered frames. Google considers a CLS of 0.1 or less as good.

How CLS Is Calculated

Each layout shift is scored as:

Layout Shift Score = Impact Fraction × Distance Fraction

• Impact Fraction: The total area of the viewport affected by the shift
• Distance Fraction: The greatest distance any element moved, divided by viewport dimension

CLS uses a session window approach: shifts are grouped into windows with at most 1 second between shifts and a maximum 5-second window length. The largest session window's total score becomes the CLS value.

Important: Not All Shifts Count

Shifts that occur within 500ms of user input (click, tap, key press) are excluded. This means expand/collapse toggles, accordions, and other interaction-triggered layout changes do not affect CLS.

Top Causes and Fixes

1. Images and Videos Without Dimensions

<!-- BAD: No dimensions, causes shift when image loads -->
<img src="photo.jpg" alt="Product">

<!-- GOOD: Browser reserves space before image loads -->
<img src="photo.jpg" alt="Product" width="800" height="600">

<!-- GOOD: CSS aspect-ratio -->
<img src="photo.jpg" alt="Product" style="aspect-ratio: 4/3; width: 100%;">

2. Web Font Loading (FOUT/FOIT) When a web font loads and replaces a fallback font, text reflows if the fonts have different metrics.

/* Use size-adjust to match fallback metrics */
@font-face {
  font-family: "Custom Font";
  src: url("/fonts/custom.woff2") format("woff2");
  font-display: swap;
  size-adjust: 105%;
  ascent-override: 90%;
}

3. Dynamically Injected Content Ads, cookie banners, notification bars, and late-loading embeds push content down. Always reserve space with min-height for containers that will receive dynamic content.

4. Late-Loading CSS CSS that arrives after initial render can restyle elements and cause shifts. Inline critical CSS and defer the rest.

5. Animations Using Layout Properties Animating top, left, width, or height triggers layout shifts. Use transform instead — transforms are composited and do not cause layout.