CLS (Cumulative Layout Shift) est une métrique des Core Web Vitals mesurant la stabilité visuelle d'une page à travers la somme des décalages de mise en page inattendus qui se produisent pendant la durée de vie de la page.
Un "décalage de mise en page" se produit lorsqu'un élément visible change de position d'un cadre rendu à l'autre sans cause initiée par l'utilisateur. Chaque décalage est noté par son impact (combien de la zone visible a bougé) et sa distance (à quelle distance les éléments ont bougé) ; le CLS est la somme de tous ces décalages. Seuils de 2026 : ≤ 0,1 bon, ≤ 0,25 nécessite une amélioration, > 0,25 mauvais.
Corrections courantes du CLS pour le commerce électronique : toujours définir les attributs width et height sur les images afin que les navigateurs réservent de l'espace ; réserver de l'espace pour le contenu intégré (iframes, publicités, vidéos) avec des dimensions explicites ou du CSS de rapport d'aspect ; éviter les reflows de changement de police en utilisant size-adjust sur @font-face ou font-display: optional ; ne pas injecter de bannières ou de popups au-dessus du contenu existant ; s'assurer que les loaders squelettes correspondent aux dimensions du contenu chargé qu'ils remplacent.
Le CLS est souvent le Core Web Vital le plus facile à corriger et le plus impactant pour la qualité perçue — même de petits décalages de mise en page semblent peu professionnels.