Qu’est ce que le Cumulative Layout Shift (CLS) ?

Le CLS (Cumulative Layout Shift) est une métrique de performance web qui évalue la stabilité visuelle d’une page pendant son chargement. Il mesure les mouvements inattendus et indésirables des éléments sur la page, pouvant perturber l’expérience utilisateur.

Le CLS se manifeste lorsque des éléments comme des images, des publicités ou des blocs de texte changent de position de manière imprévisible pendant le chargement de la page. Ces déplacements peuvent frustrer les utilisateurs, notamment s’ils cliquent accidentellement sur un élément qui a bougé juste avant qu’ils ne l’atteignent.

Calcul du CLS

Pour calculer le CLS, chaque changement de mise en page est évalué en fonction de son impact sur l’expérience utilisateur. Plus précisément, il mesure la distance qu’un élément a déplacée, multipliée par la surface de la fenêtre visible (viewport) concernée par ce changement. Cela est pris en compte pour tous les déplacements survenant pendant la durée de vie de la page, depuis le début du chargement jusqu’à son chargement complet.

Le résultat est exprimé sous forme de nombre décimal, avec une valeur de CLS inférieure à 0,1 considérée comme une bonne pratique en matière de stabilité visuelle. Une valeur supérieure à 0,1 peut engendrer des frustrations chez les utilisateurs.

Amélioration du CLS

Pour optimiser le CLS, les développeurs peuvent adopter plusieurs stratégies pour garantir que les éléments de la page sont correctement réservés à l’avance. Cela inclut l’utilisation de dimensions fixes pour les images et vidéos, ainsi que la définition de tailles pour les conteneurs destinés à accueillir du contenu dynamique. En réduisant les changements brusques dans la mise en page, les développeurs peuvent améliorer la stabilité visuelle et offrir une expérience utilisateur plus fluide.