Optimiser le CLS : supprimer les décalages de mise en page

Le Cumulative Layout Shift (CLS) est l’une des trois métriques Core Web Vitals. Il mesure l’instabilité visuelle d’une page en combinant la quantité de contenu visible qui se déplace et la distance parcourue par les éléments concernés. Contrairement aux autres signaux, c’est une valeur sans unité, et non un temps. Google recommande de ne pas dépasser un score de 0,1 pour au moins 75 % des visites.

Pour le SEO, le CLS protège l’expérience utilisateur : un contenu qui saute pendant la lecture, un bouton qui se déplace au moment du clic, voilà des situations frustrantes qui font fuir. Avant de corriger, il est utile de comprendre et mesurer le CLS pour cibler les vrais décalages. Ces décalages surviennent surtout quand un élément est ajouté ou redimensionné sans qu’un espace lui ait été réservé. Les corriger renforce la confiance et la satisfaction des visiteurs.

Les décalages se produisent souvent au chargement, quand les ressources arrivent les unes après les autres, mais aussi après le chargement, par exemple lors du défilement ou de l’arrivée d’un contenu différé. À chaque cause fréquente correspond un levier de correction simple à mettre en place. Pour comprendre comment ces décalages tardifs sont désormais comptabilisés, voyez aussi l’évolution de la mesure du CLS.

Le levier le plus efficace contre le CLS est d’indiquer toujours les attributs width et height sur vos images et vidéos. Les navigateurs modernes en déduisent un format par défaut et réservent ainsi le bon espace avant même le téléchargement. Associez ces attributs à un CSS qui laisse la hauteur s’adapter, et le décalage disparaît au chargement de l’image.

Les annonces, widgets et contenus injectés font glisser le reste de la page vers le bas s’ils n’ont pas d’espace réservé. Réservez la place attendue avec min-height ou aspect-ratio, et évitez d’insérer du contenu au-dessus de la ligne de flottaison sans interaction de l’utilisateur. Côté typographie, les polices Web peuvent provoquer des décalages au moment où elles remplacent la police de secours : font-display optional, le préchargement et une police de secours bien choisie limitent ces sauts. Pour aller plus loin sur ce point précis, consultez notre guide pour optimiser le chargement des polices.