Comment améliorer le CLS et éviter les décalages de mise en page

Si le texte bouge pendant la lecture, si un bouton change soudainement de position ou si une image pousse le contenu vers le bas, votre site manque de stabilité visuelle.

Ces mouvements inattendus sont mesurés par le Cumulative Layout Shift (CLS), l’un des Core Web Vitals de Google. Un score de 0,1 ou moins est considéré comme bon et un score supérieur à 0,25 comme mauvais.

Qu’est-ce que le CLS ?

Le CLS mesure les déplacements inattendus des éléments visibles pendant une visite. Une publicité peut apparaître au-dessus d’un lien au moment où l’on veut cliquer, ou une grande image peut décaler un article lorsqu’elle termine son chargement.

La mesure utilise le 75e percentile des visites, séparément sur mobile et ordinateur. Elle décrit donc l’expérience réelle des visiteurs, pas seulement la vitesse de téléchargement.

Les causes les plus fréquentes

Le navigateur ne connaît souvent pas la taille finale d’un élément avant son arrivée. Les causes courantes sont les images sans dimensions, les vidéos et iframes sans espace réservé, les publicités, les widgets tiers, le remplacement des polices, les bandeaux ajoutés après l’affichage et le contenu injecté par JavaScript sans emplacement prévu.

Stabiliser images, vidéos et publicités

Ajoutez width et height aux images afin que le navigateur puisse réserver leur ratio dès le départ :

<img src="exemple.jpg" alt="Exemple" width="1200" height="800">

Une image peut rester responsive avec max-width: 100%; height: auto. Pour les vidéos, cartes, formulaires et intégrations sociales, utilisez un conteneur avec aspect-ratio: 16 / 9. Réservez également la hauteur attendue des emplacements publicitaires.

Gérer le contenu dynamique

Les bandeaux de cookies, promotions, résultats de recherche, recommandations et réponses d’API ne doivent pas repousser le contenu déjà visible. Réservez leur espace à l’avance, ou utilisez des skeletons et des hauteurs minimales prévisibles.

Les polices peuvent aussi provoquer un décalage lorsque la police finale ne possède pas les mêmes métriques que la police de remplacement. Choisissez un fallback proche et examinez size-adjust avant de supprimer une police personnalisée.

Animations et diagnostic

Animer top, left, width, height ou margin modifie la mise en page. Préférez les transforms CSS, comme transform: translateX(20px), pour les mouvements et les changements d’échelle.

Utilisez PageSpeed Insights, Lighthouse et Chrome DevTools. Les données terrain représentent de vrais appareils et réseaux, tandis que les tests de laboratoire servent au débogage. Testez aussi le défilement, les menus, les consentements et le chargement de contenu supplémentaire.

Un hébergement plus rapide ne corrige pas automatiquement le CLS : recherchez d’abord l’élément qui bouge, puis corrigez son HTML, son CSS, son JavaScript ou son intégration tierce.

Questions fréquentes

Quel est un bon score CLS ?

0,1 ou moins est bon, de 0,1 à 0,25 demande une amélioration, et plus de 0,25 est mauvais.

Le lazy loading provoque-t-il du CLS ?

Pas en lui-même. Le problème apparaît lorsque le navigateur ne dispose d’aucune dimension ou ratio pour réserver l’espace.

L’amélioration du CLS améliore-t-elle le SEO ?

Les Core Web Vitals sont utilisés par les systèmes de classement de Google, mais le CLS n’est qu’un signal parmi d’autres.

Construire un site plus stable

Retenez ce principe : le navigateur doit connaître autant que possible l’espace requis avant l’apparition d’un élément. Réservez cet espace, testez les interactions réelles et vérifiez les données terrain comme les données de laboratoire.