Cumulative Layout Shift

Qu’est-ce-que le Cumulative Layout Shift ?

Le CLS est l’un des indicateurs créés par Google pour la mise en place de son programme Core Web Vitals. Il s’agit d’une métrique qui mesure la fréquence à laquelle les utilisateurs d’un site web subissent un changement de mise page inattendu. En d’autres termes, le CLS vise à analyser la quantité de contenus déplacés lors de la mise en page et mesure la “distance” de déplacement de ces contenus dans la page.
Par exemple : le CLS va permettre d’examiner les changements de mise en page lorsqu’un utilisateur lit un texte et que ce même texte est déplacé, de façon inattendue dû à l'apparition d'une publicité. Ce qui peut rendre l’expérience utilisateur négative. 

Qu’est-ce-qu’un bon CLS ?

Un bon score CLS se situe en dessous de 0,1. Au delà de 0,25 il est urgent d'intervenir afin de rétablir une stabilité visuelle convenable pour ne pas impacter l'expérience utilisateur et le positionnement de la page dans les SERPs.

Comment est calculé le CLS ?

Il est calculé de la manière suivante : fraction d’impact x fraction de distance. Ce calcul correspond à la part de l’écran qui s’est déplacée de façon inattendue, par la distance parcourue que ce soit en largeur ou en hauteur.

Quelles sont les causes d’un mauvais CLS ?

Les causes d’un mauvais CLS peuvent être :

  • des images n’ayant pas de dimensions. Ce qui fait que l’espace alloué à l’image sera déterminé par le navigateur après son importation, provoquant des décalages inattendus. Afin d’y remédier, indiquez des attributs de hauteur et de largeur avec un rapport d’aspect proportionnel dans le code HTML de la page.

  • les publicités. Afin de pouvoir empêcher le déplacement des contenus à cause de l’apparition de publicités, n’hésitez pas à créer des espaces statiques pour y intégrer les encarts publicitaires

  • les embeds et iframes non dimensionnés. Pour y remédier, trouvez la hauteur de l’intégration finale et créez un emplacement sur mesure.

  • le contenu injecté dynamiquement (bannière, formulaire, notice RGPD, …). Il est possible d’allouer une place à ces modules pour qu’ils se superposent au contenu et ne perturbe pas la mise en page.

  • les polices de caractères Web. Il est possible de signaler et de précharger celles-ci.