CLS ou Cumulative Layout Shift
Le CLS est une métrique importante centrée sur l’utilisateur qui permet de mesurer la stabilité visuelle. Grâce à ce concept, il est possible de quantifier la fréquence à laquelle les internautes rencontrent des modifications subites de mise en page. Le CLS fait aussi partie des notions qui sont désormais importante en matière de référencement.
CLS ou Cumulative Layout Shift : définition
Le Cumulative Layout Shift, ou CLS est une métrique qui indique la stabilité d’une page web dans le but de fournir une meilleure expérience utilisateur aux internautes. Il fait partie des trois Core web Vitals, de nouveaux facteurs de performance que Google lance cette année 2021. Concrètement, le CLS désigne le moment inopiné durant lequel les éléments d’une page Web se déplacent lors de son chargement. Ce phénomène est surtout perceptible sur les appareils mobiles. En ouvrant une page, un élément du site fait son apparition au bout de quelques secondes d’utilisation, ce qui fait décaler le texte ou d’autres éléments de page vers le bas, dérangeant ainsi la navigation de l’internaute.
Ce type de désagrément peut avoir des répercussions dans l’expérience utilisateur que Google considère désormais comme la clé de voûte de la qualité d’un site Internet. Bien que semblant insignifiant, le moteur de recherche peut sanctionner un site quand cette mesure de performance est élevée.
En conséquence, il est important dès à présent de tenir compte de cette métrique pour l’optimisation de site Internet, notamment en SEO. Ainsi, le site Internet ne sera donc pas pénalisé en matière de référencement naturel.
Caractéristique d’un bon Cumulative Layout Shift
Afin d’assurer d’une bonne expérience utilisateur, le CLS ne doit pas excéder 0,1 milliseconde. Au-delà de ce délai, il faudra réadapter le site pour éviter une utilisation désagréable. Google considère qu’un site avec un CLS supérieur à 0,25 milliseconde mal optimisée. Pour parvenir à atteindre l’écart de temps conseillé pour la plupart de ses utilisateurs, Google conseille de tenir compte le 75e centile des temps de chargement des pages pour le cas des appareils mobiles et desktop.
La mesure du Cumulative Layout Shift ou CLS
Pour mesurer le Cumulative Layout Shift, il faut effectuer un calcul qui consiste à multiplier la partie de l’écran qui s’est décalée soudainement par la distance effectuée. Soit CLS = Fraction d’impact x Fraction de distance. La fraction de distance peut concerner la largeur ou la hauteur de l’élément qui s’est déplacée, selon le plus large des deux.
Mais il est plus simple de recourir à des outils pour mesurer le Cumulative Layout Shift. Ces outils sont d’ailleurs très importants pour les concepteurs et les développeurs de sites Internet. Ainsi, le CLS peut être mesuré par simulation de données via les outils Lab, et à partir des données réelles via les outils sur terrain.
Parmi les outils Lab, les plus connus sont Chrome Devtools, LightHouse et WebpageTest. Quant aux outils de terrain ou Field, il y a le rapport sur l’expérience des utilisateurs de Chrome, PageSpeed Insights et la console de recherche Google à partir du rapport « Core Web Vitals ».
À noter que les outils Lab ouvrent généralement des pages dans un environnement synthétique. Par conséquent, ils ne sont pas en mesure d’évaluer avec exactitude les changements de mise en page qui ont lieu dans des conditions réelles. De ce fait, les indicateurs CLS obtenus par les outils Lab peuvent être légèrement inférieurs à ce que les internautes remarquent lors de leur navigation.
Les causes du décalage cumulatif d’une mise en page
Quand le Cumulative Layout Shift a lieu, cela peut être dû à cause de ces 5 raisons d’après Google :
Image sans dimensions
Depuis l’émancipation du responsive design, les développeurs n’utilisent plus les dimensions « largeur » et « hauteur ». Désormais, ils utilisent le CSS pour régler les dimensions des images, ce qui peut conduire à un changement significatif au moment de la mise en page, provoquant ainsi le décalage CLS.
Intégration publicitaire et iframes sans dimensions
Les conteneurs d’annonces peuvent également être la cause des problèmes du CLS. Quand la page se lance, ce conteneur de publicité peut se redimensionner et pousser les autres contenus du site Internet vers le bas.
Contenu injecté dynamiquement ou DIC
Les éléments injectés dynamiquement ou DIC peuvent aussi devenir imprévisibles. Ils peuvent alors prendre beaucoup d’espace lorsqu’ils sont intégrés sur une page web, ce qui peut conduire à des changements brusques de mise en page.
Les polices de caractère
Les polices de caractère peuvent aussi provoquer des modifications de mise en page. C’est le cas lorsqu’une police est substituée par une autre. Ce phénomène se nomme FOUT ou Flash Of Unstyled Text, qui peut se traduire par Ajout de texte non stylisé. Mais ce changement brusque peut aussi avoir lieu quand une nouvelle police s’affiche ou FOIT pour Flash of Invisible Text, ou Ajout de texte invisible en français.
Les méthodes pour améliorer le Cumulative Layout Shift
Afin d’éviter la frustration des utilisateurs d’un site de subir un déplacement intempestif, il faut adopter quelques bonnes pratiques :
- Attribuer une dimension correcte aux images et vidéos ;
- Allouer des espaces fixes destinés aux publicités ;
- Éviter les DIC ;
- Précharger les webfont ;
- Délaisser les animations pouvant modifier la taille du contenu du site ;
- Éviter les animations de déplacement sur la page web.
En somme, même si le CLS n’est pas le Core Web Vitals le plus important de Google, il mérite tout de même une attention particulière. En améliorant le Cumulative Layout Shift, en plus de l’expérience utilisateur, le positionnement sur les SERP sera également amélioré.
Si cet article vous a plu, nous vous invitons à découvrir notre agence de Référencement et à télécharger notre livre blanc « Placez le Search Engine Marketing au cœur de votre Stratégie d’Acquisition »
