Cumulative Layout Shift (CLS)

C’est quoi le Cumulative Layout Shift (CLS) ?

Le Cumulative Layout Shift (CLS) est une métrique utilisée pour évaluer la stabilité visuelle des pages web. Elle fait partie des Core Web Vitals, un ensemble d’indicateurs proposés par Google pour mesurer la qualité de l’expérience utilisateur sur le web. Le CLS sert à quantifier la fréquence et l’ampleur des changements inattendus dans la mise en page d’un site web pendant son chargement ou son interaction avec l’utilisateur.

Un score élevé de CLS est souvent synonyme d’une expérience utilisateur frustrante, car les éléments de la page (comme les images, les boutons ou les annonces publicitaires) se déplacent de manière imprévisible, ce qui peut conduire à des clics erronés ou à la difficulté de lire le contenu. Pour obtenir un bon score de CLS, il est recommandé que les développeurs web structurent les pages de manière à minimiser ces déplacements.

Comment le CLS est-il mesuré ?

Pour mesurer le CLS, deux principaux facteurs sont pris en compte :

• Impact fraction : il s’agit du pourcentage de l’écran affecté par le déplacement des éléments instables.
• Distance fraction : ceci mesure la distance relative que les éléments instables se déplacent par rapport à l’écran dans le viewport.

Le score final du CLS est calculé en multipliant ces deux facteurs. Ainsi, plus les éléments bougent fréquemment et plus ils se déplacent sur une grande distance, plus le CLS sera élevé, indiquant une moins bonne stabilité visuelle de la page.

Comment améliorer le Cumulative Layout Shift ?

Pour réduire le CLS et améliorer l’expérience de l’utilisateur, les développeurs peuvent adopter plusieurs bonnes pratiques, telles que :

• Allouer explicitement la taille et l’espace pour les ressources multimédia (images, vidéos, etc.) avant leur chargement.
• Éviter l’insertion de contenu au-dessus d’autres contenus déjà présents sans action de l’utilisateur.
• Utiliser des transitions et animations fluides pour les changements de contenu qui ne peuvent être évités.

En appliquant ces techniques, les concepteurs de sites web peuvent considérablement améliorer la stabilité de la page, réduire le CLS et, par conséquent, offrir une expérience plus agréable et plus prédictible aux visiteurs du site.