CLS (Cumulative Layout Shift) : Métrique des Core Web Vitals qui mesure la stabilité visuelle d'une page en quantifiant les décalages inattendus des éléments pendant le chargement.
Qu'est-ce que le CLS ?
Le CLS (Cumulative Layout Shift) mesure l'instabilité visuelle d'une page web. Il calcule la somme de tous les décalages de mise en page inattendus qui se produisent pendant toute la durée de vie de la page. Un décalage se produit quand un élément visible change de position de manière inattendue.
Vous avez certainement déjà vécu cette expérience frustrante : vous êtes sur le point de cliquer sur un lien ou un bouton, et soudain le contenu se décale à cause d'une image qui se charge ou d'une publicité qui apparaît. Ce type de décalage est ce que mesure le CLS.
Le score CLS va de 0 (aucun décalage) à l'infini. Google considère qu'un bon score CLS est inférieur à 0.1, tandis qu'un score supérieur à 0.25 nécessite une amélioration.
Pourquoi le CLS est important pour le SEO ?
- Fait partie des Core Web Vitals, facteur de classement officiel de Google
- Impact direct sur l'expérience utilisateur et la satisfaction des visiteurs
- Un mauvais CLS peut entraîner des clics accidentels et de la frustration
- Influence le taux de rebond et le temps passé sur le site
Comment améliorer son score CLS ?
Voici les principales techniques pour réduire les décalages de mise en page :
- Définir les dimensions des images : Ajoutez toujours width et height aux balises img
- Réserver l'espace publicitaire : Définissez des espaces fixes pour les emplacements pub
- Éviter le contenu injecté dynamiquement : Surtout au-dessus du contenu existant
- Précharger les polices web : Évitez le FOUT (Flash of Unstyled Text)
- Utiliser transform pour les animations : Plutôt que les propriétés qui modifient la mise en page
- Charger les ressources critiques en priorité : CSS et fonts nécessaires au rendu initial