What is CLS and how to eliminate Cumulative Layout Shift

Cumulative Layout Shift (CLS)

CLS measures visual instability — how much page content unexpectedly moves during load. A button you're about to click jumping down because an ad loaded above it is a classic CLS failure. Target: under 0.1.

The score is: impact fraction × distance fraction for each shift, summed. An element moving from top 10% to top 60% of the viewport, occupying 50% of viewport area, scores 0.5 × 0.5 = 0.25 (poor).

The most common causes and their fixes:

<!-- WRONG: no size, browser doesn't reserve space -->
<img src="photo.jpg" alt="Photo">

<!-- RIGHT: explicit dimensions reserve layout space -->
<img src="photo.jpg" alt="Photo" width="800" height="450">

/* RIGHT: use aspect-ratio as a modern alternative */
img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

For fonts, font-display: swap causes layout shifts because fallback and web font metrics differ. Use font-display: optional for body fonts, or use size-adjust to match fallback metrics:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: optional;
}

Never inject content above existing content. If you must add banners or ads, pre-reserve their space with a min-height container so existing content doesn't shift.