Cumulative Layout Shift

Le Cumulative Layout Shift (CLS) est une métrique importante utilisée dans la mesure des performances web, spécifiquement dans le cadre des Core Web Vitals Les Core Web Vitals sont des métriques de Google qui mesurent la vitesse de chargement, l'interactivité et la stabilité visuelle des sites web. Elles sont essentielles pour offrir une bonne expérience utilisateur et améliorer le SEO. de Google. Elle évalue la stabilité visuelle d’une page web en mesurant les décalages inattendus des éléments visuels pendant le chargement de la page. Un décalage peut survenir lorsque des images, des publicités, ou des ressources s’affichent ou se redimensionnent tardivement, provoquant un changement de position des éléments déjà chargés.

Le score CLS est calculé en fonction de la taille de l’élément déplacé et de la distance parcourue par rapport à l’écran. Plus les décalages sont nombreux et importants, plus le score CLS sera élevé, ce qui signifie que l’ expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. est affectée négativement.

Les décalages inattendus peuvent gêner les utilisateurs, par exemple :

• Lorsqu’un utilisateur essaie de cliquer sur un bouton, mais que celui-ci se déplace à cause d’un chargement tardif.
• Des textes ou images qui sautent ou changent de position pendant le défilement de la page.

Les causes courantes d’un CLS élevé incluent :

• Images sans dimensions spécifiées : Si les dimensions d’une image ne sont pas définies, le navigateur ne réserve pas d’espace pour elle, ce qui provoque un décalage lorsqu’elle se charge.
• Publicités : Les annonces qui se chargent dynamiquement sans réserver d’espace initial.
• Polices Web : Les polices qui provoquent des sauts de texte lorsque la police de substitution est remplacée par la police finale.

Réduire le CLS implique :

• Définir les dimensions des images et des vidéos.
• Réserver des espaces pour les éléments dynamiques comme les publicités.
• Optimiser le chargement des polices.

Un bon score CLS améliore non seulement l’expérience utilisateur, mais également le référencement naturel Le référencement naturel, ou SEO (Search Engine Optimization), est l'ensemble des techniques visant à améliorer la visibilité d'un site web dans les résultats de recherche des moteurs comme Google, sans utiliser de publicité payante. (SEO), car Google valorise les pages web offrant une stabilité visuelle lors du chargement.