CLS (Cumulative Layout Shift)
Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle d'une page en quantifiant les décalages inattendus des éléments lors du chargement. C'est l'un des trois Core Web Vitals. Un bon score est inférieur à 0,1.
Explication approfondie
Quelles sont les causes de CLS élevé et comment stabiliser sa mise en page ?
Un CLS élevé se manifeste par des éléments qui « sautent » pendant le chargement : un texte qui se déplace quand une image se charge au-dessus, un bouton qui bouge quand une bannière apparaît. Ces décalages peuvent amener l’utilisateur à cliquer sur le mauvais élément.
Les causes principales : les images sans dimensions (width et height absents), les publicités sans espace réservé, les polices web qui provoquent un FOUT (Flash of Unstyled Text), et les éléments injectés dynamiquement au-dessus du contenu visible.
Les solutions : toujours définir width et height sur toutes les images et vidéos, réserver de l’espace pour les publicités, utiliser font-display: optional pour les polices, et éviter d’insérer des éléments au-dessus du contenu déjà visible.
Un site charge ses images sans dimensions. Le texte s’affiche puis les images poussent tout le contenu vers le bas. Un utilisateur clique sur une pub insérée là où était son curseur. En ajoutant les dimensions sur toutes les images, le CLS passe de 0,45 à 0,04.
Questions fréquentes
FAQ — CLS (Cumulative Layout Shift)
Presque. Un CLS parfaitement nul est difficile sur les pages avec du contenu dynamique. L'objectif raisonnable est moins de 0,1 sur 75% des visites. Les polices web et les éléments tiers sont souvent les derniers freins.
Uniquement si elles font bouger des éléments sans interaction utilisateur. Les animations déclenchées par clic ne sont pas comptabilisées. Ce sont les mouvements pendant le chargement de la page qui sont pénalisés.
Via Chrome DevTools (onglet Performance ou Lighthouse), PageSpeed Insights, ou l'extension Web Vitals de Chrome. Ces outils identifient précisément quels éléments causent les décalages.
Vous avez un projet SEO ?
Mettons ce savoir en pratique pour votre site.