Définition
Le CLS mesure la stabilité visuelle de la page : les mouvements inattendus d'éléments pendant le chargement.
Explication détaillée
Un mauvais CLS, c'est quand vous êtes sur le point de cliquer sur un bouton et qu'une image se charge, décalant tout le contenu et vous faisant cliquer ailleurs. Un bon CLS est inférieur à 0,1. Pour l'améliorer : définissez les dimensions des images et vidéos, évitez d'insérer du contenu au-dessus du contenu existant.
Exemple concret
Une publicité qui s'affiche et décale tout le texte vers le bas cause un mauvais CLS.
Bonnes pratiques
- Définissez toujours les dimensions (width/height) des images et vidéos.
- Réservez de l'espace pour les publicités et embeds avec des conteneurs de taille fixe.
- Évitez d'insérer du contenu au-dessus du contenu existant.
- Utilisez les attributs CSS aspect-ratio pour les médias responsives.
- Préchargez les polices web pour éviter le FOUT/FOIT.
Erreurs courantes à éviter
- Oublier les dimensions des images (lazy loading sans placeholder).
- Insérer des bannières ou pop-ups qui décalent le contenu.
- Charger des publicités sans espace réservé.
- Utiliser des polices web qui changent la taille du texte au chargement.
Termes associés
Autres termes : Performance
Passez de la théorie à la pratique
Maintenant que vous comprenez ce qu'est le/la CLS, analysez votre site pour voir comment l'améliorer.
Analyser mon site gratuitement