Qu'est-ce que le Cumulative Layout Shift ?

Le Cumulative Layout Shift est le déplacement inattendu d'un élément de la page Web pendant son chargement.

Vous l'avez sans doute remarqué en navigant avec votre smartphone.
Vous arrivez sur une page web, vous démarrez votre lecture et une image apparaît au bout de 5 secondes.
Votre texte est décalé vers le bas et vous perdez le fil de votre lecture, ce qui est très agacent.

C'est pour éviter ce genre de désagrément et ainsi améliorer l'expérience utilisateur que Google sanctionne désormais ces décalages d'affichage appelé : Cumulative Layout Shift.

C'est une mesure que vous devez impérativement prendre en compte pour optimiser votre site internet.
Le CLS entraîne forcément une mauvaise expérience pour les utilisateurs.
Et à l'avenir, cela va également pénaliser votre référencement naturel.

Comment améliorer le Cumulative Layout Shift (CLS) ?

Pour éviter la frustration de vos visiteurs avec le déplacement intempestif d'éléments sur votre page, voici bonnes pratiques à respecter :

• dimensionner vos images et vidéos : vous allouez un espace défini avant leur chargement
• allouer des espaces fixes aux publicités : comme pour les vidéos et les images, réserver un espace à vos blocs de publicité afin d'éviter qu'au moment de leur affichage ils déplacent d'autres éléments
• éviter les contenus ajoutés dynamiquement avec du javascript par exemple
• le chargement d'une webfont peut provoquer des décalages sur toute votre page : ajouter font-display : optional ou précharger votre police avec <link rel="preload">
• éviter les animations qui modifient la taille votre élément (height et width) : utiliser plutôt transform: scale ()
• ne déplacer pas vos éléments en modifiant les propriétés top, right, bottom, ou left : adopter la propriété transform: translate () pour vos animations de déplacement

Mesurer le Cumulative Layout Shift (CLS)

Le calcul du Cumulative Layout Shift (CLS) prend en compte deux mesures : Impact Fraction et Distance Fraction.
En résumé : le Layout Shift Score = Impact Fraction * Distance Fraction.
Si vous souhaitez en savoir plus sur sa méthode de calcul, je vous conseille ce lien.

Deux outils pourront vous aider à évaluer votre score Cumulative Layout Shift (CLS) : GTMetrix et Lighthouse.

Plus d'informations sur l'optimisation de votre site internet, GTMetrix et Lightouse.

Conclusion : Il est important de comprendre le Cumulative Layout Shift (CLS).
Dès 2021, cette nouvelle mesure va devenir un nouveau facteur de classement de votre site internet sur les moteurs de recherche.