Cumulative Layout Shift (CLS)

Le CLS additionne les décalages de mise en page inattendus pendant la vie de la page. Objectif : moins de 0,1.

Mis à jour le

Causes et correctifs

  • Images, vidéos, iframes sans dimensions : indiquez width/height ou aspect-ratio (Images).
  • Publicités et embeds : réservez l'espace avec min-height.
  • Contenu injecté : n'insérez rien au-dessus du contenu existant, sauf après une action de l'utilisateur.
  • Polices web : font-display: swap (ou optional), police de secours ajustée, préchargement de la police critique.
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é */ }

Le CLS est calculé par fenêtres de session : un décalage tardif compte aussi. Référence : web.dev/cls. Complétez avec LCP et INP.