Cumulative Layout Shift (CLS)

Last updated: April 2026

CLS measures how much page content unexpectedly moves during loading. A score of 0 means no shifting. High CLS frustrates users who click the wrong element because something shifted. Target: under 0.1.

Fix 1 — always set width and height on images

<!-- Bad: browser doesn't know size until image loads -->
<img src="hero.webp" alt="Hero">

<!-- Good: browser reserves space immediately -->
<img src="hero.webp" width="1200" height="600" alt="Hero">

Fix 2 — reserve space for ads and embeds

<div style="min-height: 250px; width: 300px">
  [Ad slot]
</div>

Fix 3 — avoid font flash (FOUT)

<link rel="preload" as="font" href="/fonts/inter.woff2"
  type="font/woff2" crossorigin>

/* CSS: use font-display: optional to prevent layout shift */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: optional;
}

Fix 4 — use CSS aspect-ratio for responsive images

img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}