Qu’est-ce que le CLS ?
Le CLS permet de mesurer la stabilité visuelle d’une page web. Google verra ainsi les changements de mise en page subis par les internautes. Le score CLS doit être inférieur à 0,1, le plus proche possible de 0.
La vidéo ci-dessous proposée par Google est l’exemple type d’une page dont le CLS dépassera 0.1.
La page se charge avec les différents blocs de contenu. L’internaute commence à lire le contenu lorsqu’un bloc de publicité (bleu dans notre exemple) apparaît et décale tout le contenu vers le bas. Ce genre de comportement peut générer de la frustration chez l’internaute et sera désormais pénalisé par Google.
Quels sont les éléments impactants ?
Selon Google, il y a 5 raisons pour lesquelles le Cumulative Layout Shift se produit :
- Images sans dimensions
Lorsque le responsive design a fait son apparition, les développeurs ont cessé d’utiliser les dimensions « largeur » et « hauteur » et ont commencé à utiliser le CSS pour redimensionner les images. Le problème est que l’espace de la page ne pouvait être alloué qu’une fois l’image téléchargée, ce qui signifie qu’il pouvait y avoir un changement significatif de la mise en page lorsque l’image était redimensionnée pour s’adapter à la vue.
- Intégrations publicitaires et iframes sans dimensions
Les conteneurs d’annonces peuvent causer de multiples problèmes pour le CLS. La taille des conteneurs publicitaires influence les revenus générés par les clics (selon le dispositif et la plateforme utilisés), mais peut ne pas être adaptée pour l’expérience de l’utilisateur, car ils peuvent pousser le contenu de la page plus bas.
- Contenu injecté dynamiquement (DIC)
Les vidéos Youtube, Google Maps et les messages des réseaux sociaux sont tous considérés comme des contenus injectés dynamiquement. Ces widgets intégrés peuvent être imprévisibles, car ils ne savent pas quelle sera l’ampleur de la modification. Un message issu des réseaux sociaux, par exemple, peut être constitué d’images, de vidéos et de plusieurs lignes de texte, et tous ces aspects peuvent changer au fil du temps.
- Les polices de caractères entraînant du FOUT ou FOIT
Le téléchargement de polices peut entraîner des modifications de la mise en page, soit lorsqu’une police de secours est remplacée par une nouvelle police (FOUT – ‘Flash Of Unstyled Text’ ou « Ajout de texte non stylisé »), soit lorsqu’un texte « invisible » est affiché jusqu’à ce qu’une nouvelle police s’affiche (FOIT – « Flash Of Invisible Text » ou « Ajout de texte invisible »).
Comment mesurer le Cumulative Layout Shift ?
Le score CLS est calculé en multipliant la part de l’écran qui s’est déplacée de manière inattendue par la distance parcourue. (CLS = Fraction d’impact x Fraction de distance) – en termes de fraction de distance, il peut s’agir de la largeur ou de la hauteur, selon la plus grande des deux.
Pour les concepteurs et les développeurs de sites web, le CLS peut être mesuré soit avec des données simulées (« en laboratoire »), soit avec des données réelles d’utilisateurs (« sur le terrain »). Ces mesures peuvent être utilisées selon deux scénarios à savoir si votre site est encore en phase d’élaboration ou s’il est déjà en ligne.
Comment le Cumulative Layout Shift est-il calculé ?
Le calcul du CLS implique deux événements particuliers : la proportion d’impact et la proportion de distance. La proportion d’impact est la mesure de l’espace occupé par un élément non optimisé d’une fenêtre. Lorsque cet élément se télécharge et se déplace, son emplacement initial ainsi que son emplacement final sont calculés par la métrique.
Ainsi, lorsqu’un élément occupe 50 % d’une fenêtre d’affichage puis, suite au chargement, gagne 20 % supplémentaires, les deux valeurs sont additionnées. La proportion d’impact est ensuite exprimée sous forme de score. Pour notre exemple, le score de la proportion d’impact serait de 0,70.
L’autre mesure est la proportion de distance. Celle-ci s’exprime en se basant sur la quantité d’espace générée par le déplacement de l’élément de la page. Ainsi, la proportion de distance prend en compte la position d’origine et la position finale.
Dans l’exemple que nous avons pris précédemment cette proportion de distance représente 20 %. Pour calculer le CLS, l’algorithme se base sur une multiplication des deux données. Ainsi, notre exemple nous donne la formule suivante : 0.70 x 0.20 = 0,14
L’importance du CLS en 2021
L’intégration de ces signaux à l’algorithme de classement devrait intervenir en mai 2021 selon un communiqué de Google. Il convient de s’en préoccuper dès à présent. Dans un premier temps, l’outil PageSpeed Insights fourni gratuitement par le moteur de recherche vous offrira la possibilité de connaître vos performances en quelques secondes.
Ce diagnostic précis doit ainsi être le point de départ de votre réflexion. En plus des scores pour chacun des trois signaux web essentiels, PageSpeed Insights mettra à votre disposition des conseils pour les perfectionner.
Bien entendu, la qualité des contenus proposés à vos visiteurs restera le critère principal de classement des pages pour Google. Il en va de même pour les backlinks. Mais face à des contenus toujours plus précis, il se pourrait bien que l’expérience utilisateur devienne à terme un véritable élément de différenciation, et donc de génération de trafic.
Comment connaitre la valeur de ces signaux web essentiels pour votre site ?
Pour connaitre la valeur de ces nouveaux indicateurs LCP, FID et CLS, rendez-vous sur le site PageSpead Insights : https://developers.google.com/speed/pagespeed/insights/