Le CLS (Cumulative Layout Shift) est un indicateur utilisé par Google pour mesurer la stabilité visuelle d’une page web pendant son chargement. Il fait partie des Core Web Vitals, qui sont des métriques essentielles pour évaluer la qualité de l’expérience utilisateur sur un site.
Le CLS évalue les changements inattendus de mise en page qui se produisent lorsqu’un élément de la page (texte, bouton, image, publicité, etc.) se déplace brusquement après le chargement initial. Un score CLS élevé signifie que les utilisateurs rencontrent une page instable, ce qui peut être frustrant, notamment lorsqu’un élément déplacé entraîne un clic involontaire.
Google considère le CLS comme un facteur de classement SEO, ce qui signifie que les sites web avec une mauvaise stabilité visuelle risquent de perdre en visibilité dans les résultats de recherche.
Fonctionnement et calcul du CLS
Le CLS est une mesure sans unité qui quantifie l’ampleur et la fréquence des déplacements d’éléments visibles sur une page. Il repose sur deux facteurs principaux :
- L’impact fraction (Fraction d’impact)
- Il s’agit de la proportion d’écran affectée par un déplacement.
- Par exemple, si un élément occupe 50 % de l’écran et se déplace de 25 %, l’impact fraction sera 0.5 + 0.25 = 0.75.
- La distance fraction (Fraction de distance)
- Mesure à quel point un élément s’est déplacé par rapport à sa position initiale.
- Un élément qui se déplace de 25 % de la hauteur d’écran aura une distance fraction de 0.25.
Calcul du CLS :
CLS = Impact Fraction × Distance FractionCLS
Un score CLS idéal est inférieur à 0.1, tandis qu’un score supérieur à 0.25 est considéré comme mauvais.
Avantages d’un bon CLS
- Meilleure expérience utilisateur : Une page stable évite la frustration des utilisateurs, notamment lors de la lecture ou des interactions avec des boutons.
- Amélioration du référencement (SEO) : Google valorise les sites ayant un bon CLS dans son classement des résultats de recherche.
- Réduction des erreurs de navigation : Une mise en page stable empêche les clics accidentels sur des liens ou des boutons indésirables.
- Taux de conversion amélioré : Une page fluide et bien structurée encourage les visiteurs à interagir avec le contenu sans interruptions.
- Accessibilité renforcée : Une bonne gestion du CLS bénéficie aux utilisateurs ayant des limitations physiques ou cognitives.
Causes d’un CLS élevé et comment l’améliorer
Principales causes :
- Chargement tardif des images : Les images sans dimensions définies provoquent des changements brusques lors de leur affichage.
- Publicités et iframes dynamiques : L’insertion de contenus tiers peut déplacer des éléments déjà chargés.
- Fonts non optimisées (FOUT/FOUT) : Un changement de police (Flash of Unstyled Text) peut entraîner un déplacement des textes.
- Éléments dynamiques injectés : Certains scripts ajoutent du contenu après le chargement initial, déstabilisant la mise en page.
Solutions pour réduire le CLS :
- Définir les dimensions des images et vidéos : Utiliser les attributs
widthetheightou le CSSaspect-ratio. - Prévoir de l’espace pour les publicités : Réserver un bloc fixe pour éviter les décalages.
- Utiliser les polices avec font-display: swap : Cela réduit les changements de style au chargement.
- Charger progressivement les éléments dynamiques : Ajouter les nouvelles sections de contenu avec
min-heightpour éviter les sauts visuels.
Conclusion
Le CLS (Cumulative Layout Shift) est un indicateur essentiel pour garantir une expérience utilisateur fluide sur le web. Une mise en page stable évite les frustrations et améliore la navigation, le taux de conversion et le SEO. Avec l’importance croissante des Core Web Vitals, l’optimisation du CLS devient une priorité pour les développeurs et gestionnaires de sites.
Les bonnes pratiques, comme la définition des dimensions des médias et la gestion des contenus dynamiques, permettent de réduire les changements de mise en page et d’offrir un site performant et agréable aux visiteurs.
Source : https://web.dev/articles/cls