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 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 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 (SEO), car Google valorise les pages web offrant une stabilité visuelle lors du chargement.