Qu'est-ce que le décalage cumulatif de la mise en page (CLS) ?
Le décalage cumulatif de la mise en page (Cumulative Layout Shift, CLS) est une mesure de Core Web Vitals développée par Google pour mesurer la stabilité visuelle d'une page web. Il quantifie le total de tous les changements de mise en page inattendus qui se produisent pendant toute la durée de vie de la page. Les changements de mise en page se produisent lorsqu'un élément visible change de position d'un cadre rendu à l'autre.
Comment le CLS est-il mesuré ?
Les scores CLS vont de 0, représentant aucun déplacement, à des valeurs supérieures à 0 indiquant divers degrés d'instabilité. La formule tient compte de la fraction d'impact et de la fraction de distance de chaque déplacement, en calculant l'ampleur du mouvement des éléments et la partie de la fenêtre qu'ils couvrent.
Interprétation du score CLS
- Bon : 0 - 0,1
- Besoin d'amélioration : 0.1 - 0.25
- Médiocre : supérieur à 0,25
Pourquoi le CLS est-il important ?
Le CLS est essentiel pour l'expérience de l'utilisateur, car les changements de présentation inattendus peuvent être source de frustration pour l'utilisateur. Par exemple, si un utilisateur est sur le point de cliquer sur un bouton et que la mise en page change, l'amenant à cliquer sur quelque chose d'autre sans le vouloir, cela peut entraîner une mauvaise expérience utilisateur et une perte potentielle de conversions.
Causes courantes d'un mauvais CLS
-
Images sans dimensions :
- L'inclusion d'images dans votre code HTML sans spécifier leur largeur et leur hauteur peut entraîner des modifications de la mise en page, car le navigateur ne sait pas quel espace lui allouer au départ.
-
Publicités, Embeds et Iframes sans dimensions :
- Ces éléments peuvent se charger dynamiquement et provoquer des décalages dans la mise en page si leurs dimensions ne sont pas spécifiées à l'avance.
-
Contenu injecté dynamiquement :
- L'ajout de contenu au-dessus du contenu existant dans le DOM peut pousser les éléments vers le bas et provoquer des décalages.
-
Les polices de caractères Web à l'origine de FOIT/FOUT :
- Le Flash de texte invisible (FOIT) et le Flash de texte non stylisé (FOUT) peuvent provoquer des changements de mise en page lorsque le navigateur charge les polices web.
Meilleures pratiques pour minimiser le CLS
-
Inclure des attributs de taille sur les images et les vidéos :
- Définissez toujours la largeur et la hauteur des images et des vidéos dans le code HTML afin de réserver de l'espace dans la mise en page avant leur chargement.
-
Réserver de l'espace pour les annonces et les encarts :
- Utilisez le CSS pour définir les dimensions des emplacements publicitaires, des iframes et des éléments intégrés afin d'éviter les décalages de mise en page lors de leur chargement.
-
Évitez d'injecter dynamiquement du contenu au-dessus du contenu existant :
- Ajoutez du nouveau contenu en dessous du pli ou dans des conteneurs qui ont déjà un espace réservé.
-
Utiliser des stratégies de chargement des polices :
- Utilisez la propriété CSS font-display pour contrôler l'affichage des polices web et minimiser les décalages dus à FOIT/FOUT.
-
Utiliser CSS Transform pour les animations :
- Utilisez la propriété transform au lieu de top, bottom, left ou right pour animer des éléments sans modifier la mise en page.
Conclusion
Le décalage cumulatif de la mise en page (CLS) est une mesure essentielle pour garantir une expérience utilisateur stable et visuellement attrayante. En comprenant les facteurs qui contribuent aux changements de présentation et en mettant en œuvre les meilleures pratiques pour les minimiser, vous pouvez améliorer le score CLS de votre page web et accroître la satisfaction générale des utilisateurs.
Pour plus d'informations sur l'amélioration de CLS et d'autres vitaux Web de base, vous pouvez consulter la documentation de Google sur les vitaux Web.
