Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle d'une page combien le contenu bouge pendant le chargement. Seuil Google : CLS < 0,10. Un CLS élevé frustré les utilisateurs qui cliquent sur le mauvais bouton à cause d'un décalage imprévu. Chaque 0,1 d'amélioration du CLS réduit le taux de rebond de 8-12 %.
Le CLS (Cumulative Layout Shift) est la troisième métrique Core Web Vitals, mesurant la stabilité visuelle d'une page web. Il quantifie la somme (cumulative) de tous les décalages de mise en page (layout shifts) non désirés qui se produisent pendant le chargement d'une page. Chaque décalage est calculé comme le produit de la distance de déplacement (fraction de la viewport height) et de la fraction impactée (portion des éléments affectés). Un score de 0 signifie aucune instabilité ; 0,1 est le seuil à ne pas dépasser.
Les causes fréquentes : images sans dimensions explicites (le navigateur ne connaît pas la taille avant le téléchargement), bannières cookies injectées en haut de page après le chargement initial, (FOIT/FOUT) avec font-display: optional, et vidéos sans container dimensionné. Les sites e-commerce ont un CLS moyen de 0,28 (bien au-delà du seuil), contre 0,05 pour les sites à faible décalage.
Le CLS, c'est comme essayer de cliquer sur « Confirmer » dans une application bancaire et que le bouton « Annuler » monte au dernier moment sous votre doigt. Vous venez de virer 500 au mauvais destinataire. La stabilité visuelle, c'est la confiance : quand les éléments restent à leur place, l'utilisateur sait où il en est.
Chaque image et vidéo doit déclarer ses dimensions (width + height) ou utiliser le ratio intrinsèque (aspect-ratio) pour que le navigateur réserve l'espace avant le chargement. Une image hero de 800×400 px sans dimensions déclarées provoque un décalage de +0,25 de CLS. L'attribut loading="lazy" sur les images hors viewport réduit aussi les décalages tardifs. Pour les images responsives, la règle CSS aspect-ratio: 16/9 avec width: 100% garantit une réservation cohérente.
Le chargement tardif des polices web provoque le Flash of Invisible Text (FOIT) ou le Flash of Unstyled Text (FOUT) qui décale le contenu. La directive font-display: swap affiche le texte avec une police de substitution pendant le chargement, évitant la absence totale de texte mais pouvant provoquer un léger décalage. font-display: optional élimine le décalage mais n'affiche la police personnalisée que si elle est déjà en cache. L'utilisation de font-size-adjust harmonise les substitutions.
Les bannières cookies, barres de notification et pop-ins injectés après le chargement décalent tout le contenu. Solutions : réservation d'un espace fixe en haut de page (min-height sur le conteneur), intégration dans le flux HTML avant le contenu principal (pas en prepend), et animation en opacity plutôt qu'en height/width. Les iframes publicitaires avec dimensions fixes et loading="lazy" préviennent le décalage des contenus environnants.
font-display: swap et précharger les polices critiques via <link rel="preload">.min-height sur les conteneurs dynamiques et intégrer les bannières dans le flux.Site e-commerce de prêt-à-porter féminin : CLS de 0,34 (très mauvais). Causes identifiées : (1) 80 % des images de fiches produit sans dimensions, (2) bannière cookie injectée en JavaScript après le chargement décalant le header de 60 px, (3) polices web avec font-display: optional provoquant des reflows. Corrections : ajout des attributs width/height sur toutes les images, intégration de la bannière cookie dans le HTML statique avec min-height: 60px, passage à font-display: swap et préchargement des polices critiques. CLS passe à 0,07. Impact mesuré : taux de rebond -22 %, conversions +17 %, panier moyen +12.
| Métrique | Seuil Google | Impact |
|---|---|---|
| Bon | 0,10 | Stabilité ; confiance utilisateur |
| À améliorer | 0,10 0,25 | Décalages perceptibles ; friction |
| Mauvais | > 0,25 | Décalages importants ; clics accidentels |
| CLS moyen e-commerce | 0,28 (supérieur au seuil) | Room for improvement |
| Image sans dimensions | +0,25 de CLS | Impact d'une seule image non déclarée |