CLS (Cumulative Layout Shift)
Le CLS mesure la stabilité visuelle d'une page : les décalages inattendus de contenu pendant le chargement (texte qui bouge, images qui poussent le contenu). Seuils Google : < 0,1 = bon, 0,1-0,25 = à améliorer, > 0,25 = mauvais. 38 % des sites échouent au seuil de 0,1.
CLS : définition complète
Causes fréquentes de CLS : images sans dimensions (width/height non définies), publicités chargées tardivement, polices web (FOUT/FOIT), contenu injecté dynamiquement (bandeaux cookies, pop-ups). Chaque décalage frustre l'utilisateur — Google le pénalise.
Solutions : définir width et height sur toutes les images (ou utiliser aspect-ratio), charger les polices en font-display: swap (ou next/font en Next.js), réserver l'espace pour les pubs et les bandeaux.
Exemple concret
Un bandeau cookie qui apparaît après 2s et pousse le contenu de 80px = CLS de 0,18 (mauvais). Solution : réserver 80px en haut dès le chargement. CLS : 0,02.
Concepts associés
PageSpeed
PageSpeed est le score de performance d'une page web mesuré par Google (0-100).
TechniqueLCP
Le LCP mesure le temps de rendu du plus grand élément visible dans le viewport (image héro, bloc de texte, vidéo).
TechniqueINP
L'INP mesure la réactivité d'une page : le temps entre une interaction utilisateur (clic, tap, touche clavier) et la mise à jour visuelle suivante.
TechniqueLazy Loading
Le lazy loading est une technique de chargement différé qui ne charge les images et les vidéos que lorsqu'elles entrent dans le viewport (zone visible de l'écran).
TechniqueResponsive Design
Le responsive design est une approche de conception web qui adapte automatiquement la mise en page d'un site à la taille de l'écran (mobile, tablette, desktop).
Besoin d’aide pour votre stratégie digitale ?
Audit offert. Recommandations en 48h. Zéro engagement.