CLS (Cumulative Layout Shift)
Définition courte
Le CLS est le score de stabilité Core Web Vitals qui mesure à quel point les éléments visuels se déplacent de façon inattendue pendant le chargement.
Quand une image ou un espace publicitaire se charge en retard et repousse le texte vers le bas pendant le rendu de la page, ce mouvement compte dans le CLS. Le score multiplie la taille de la zone déplacée par la distance du déplacement, l'objectif étant une valeur proche de zéro.
Il apparaît dans PageSpeed Insights et Search Console. Le seuil officiel est de 0,1 : en dessous, c'est bon, entre 0,1 et 0,25, à améliorer, au-delà, mauvais. Réserver à l'avance l'espace des images évite en grande partie ce déplacement.
On le confond souvent avec la vitesse de page, mais le CLS concerne la stabilité, pas la vitesse ; une page qui charge vite peut quand même obtenir un mauvais score si des éléments bougent pendant le rendu.
L'erreur la plus courante consiste à insérer une bannière de consentement aux cookies ou une publicité en haut de la page une fois qu'elle est déjà rendue, ce qui pousse tout le contenu en dessous et détériore fortement le CLS. La bonne approche consiste à réserver à l'avance une hauteur fixe pour ces éléments ou à les superposer, afin que vous ne déplaciez jamais le contenu déjà affiché.
Pourquoi c'est important
Si un bouton se déplace juste au moment où un visiteur va appuyer, il touche le mauvais élément, ce qui crée méfiance et abandon. Garder le CLS bas évite les clics erronés dans les formulaires, le panier et le paiement.
Exemple illustratif
Sur la page de tarifs d'une chaîne de spas, une bannière chargée en retard repoussait le texte vers le bas et les visiteurs cliquaient par erreur sur un autre forfait ; fixer une hauteur pour cet emplacement a arrêté le déplacement.
