Qu'est-ce que le CLS (Cumulative Layout Shift)?
Le CLS mesure la stabilité visuelle d'une page. Un mauvais CLS signifie que les éléments bougent pendant le chargement.
Le CLS (Cumulative Layout Shift) est une métrique Core Web Vital qui mesure la stabilité visuelle d'une page web pendant son chargement.
Qu'est-ce qu'un layout shift?
Un layout shift se produit quand un élément visible change de position de manière inattendue. Par exemple : un bouton qui se déplace parce qu'une image se charge au-dessus.
Score idéal
- ●Bon : < 0.1
- ●À améliorer : 0.1 – 0.25
- ●Mauvais : > 0.25
Causes courantes
- ●Images sans dimensions (width/height) définies
- ●Publicités ou iframes qui se chargent dynamiquement
- ●Polices web qui provoquent un « flash » de texte
- ●Contenu injecté dynamiquement sans espace réservé
Solutions
- ●Toujours définir width et height sur les images
- ●Réserver l'espace pour les publicités
- ●Utiliser
font-display: swapavec des polices de substitution - ●Éviter d'injecter du contenu au-dessus du contenu existant
Impact SEO
Un mauvais CLS frustre les utilisateurs et peut faire baisser votre classement Google.
Termes connexes
Qu'est-ce que les Core Web Vitals?
Les Core Web Vitals sont 3 métriques Google mesurant la vitesse, la réactivité et la stabilité visuelle d'une page web.
Qu'est-ce que le LCP (Largest Contentful Paint)?
Le LCP mesure le temps de chargement du plus grand élément visible d'une page. Objectif : moins de 2.5 secondes.
Qu'est-ce que la Vitesse de Chargement?
La vitesse de chargement mesure le temps nécessaire pour afficher complètement une page web. C'est un facteur de classement Google.
Qu'est-ce que le Lazy Loading?
Le lazy loading est une technique qui retarde le chargement des images et vidéos jusqu'à ce qu'elles soient visibles à l'écran.
Qu'est-ce que Google Lighthouse?
Lighthouse est un outil Google qui audite la performance, l'accessibilité, le SEO et les bonnes pratiques d'une page web.
Qu'est-ce que le TBT (Total Blocking Time)?
Le TBT mesure le temps total pendant lequel la page est bloquée et ne répond pas aux interactions utilisateur.