Cumulative Layout Shift (CLS)
Définition du Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift (CLS) est un indicateur de performance web qui mesure la stabilité visuelle d'une page en quantifiant tous les déplacements inattendus d'éléments pendant le chargement. Il calcule à quel point les éléments "bougent" de leur position initiale, créant une expérience frustrante pour l'utilisateur.
Le CLS additionne tous les "shifts" non intentionnels : une image qui pousse le texte vers le bas, un bouton qui se déplace au moment où l'utilisateur va cliquer, ou une publicité qui fait sauter tout le contenu.
Pourquoi le CLS est-il important ?
Le CLS mesure la frustration causée par l'instabilité visuelle. Qui n'a jamais vécu cette situation : vous vous apprêtez à cliquer sur un lien et au dernier moment, un élément se charge et décale tout, vous faisant cliquer sur autre chose ?
Un mauvais CLS dégrade l'expérience utilisateur, peut causer des clics accidentels et donne une impression de site "mal conçu". C'est l'une des trois métriques Core Web Vitals de Google, directement liée à l'utilisabilité.
Quels sont les seuils CLS recommandés ?
Google classe les performances du CLS selon ces critères :
- 🟢 Bon : inférieur à 0,1
- 🟡 À améliorer : entre 0,1 et 0,25
- 🔴 Mauvais : supérieur à 0,25
Le CLS est une valeur sans unité qui représente la proportion de l'écran affectée par les déplacements.
Comment améliorer le Cumulative Layout Shift ?
Pour réduire le CLS, il faut réserver l'espace des éléments avant leur chargement :
- Définir des dimensions explicites pour les images et vidéos
- Réserver l'espace des publicités et contenus dynamiques
- Précharger les polices pour éviter les changements de mise en page
- Éviter d'insérer du contenu au-dessus du contenu existant
L'objectif est de garantir que la mise en page reste stable pendant toute la durée du chargement.