Cumulative Layout Shift (CLS)

CLS adds up unexpected layout shifts during the page's lifetime. Target: under 0.1.

Updated

Causes and fixes

  • Images, videos, iframes without dimensions: set width/height or aspect-ratio (Images).
  • Ads and embeds: reserve space with min-height.
  • Injected content: never insert above existing content unless in response to a user action.
  • Web fonts: font-display: swap (or optional), tuned fallback font, preload the critical font.
img, video { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
@font-face { font-family: "Police"; src: url("/fonts/police.woff2") format("woff2"); font-display: swap; }
.pub { min-height: 250px; /* espace réservé à la publicité */ }

CLS is computed over session windows, so late shifts count too. Reference: web.dev/cls. Complete with LCP and INP.