Repérer les déplacements inattendus
Le CLS n’exclut pas tous les mouvements intentionnels. La métrique écarte les décalages survenant dans les 500 millisecondes qui suivent une interaction utilisateur qualifiée, mais une réponse retardée à une interaction peut encore compter. Elle utilise des fenêtres de session : examinez donc les entrées de type layout-shift réellement enregistrées, plutôt que de supposer qu’une seule animation explique le score.
Comment les contrôler
Utilisez les données terrain pour savoir si le problème touche de vrais visiteurs, puis reproduisez-le dans une trace de performance avec les marqueurs de décalage. Inspectez l’élément qui a bougé et celui qui a provoqué le mouvement : ce ne sont pas forcément les mêmes. Testez les premières visites et les visites suivantes, car les polices et ressources mises en cache peuvent masquer un problème de premier chargement.
Comment l’implémenter ou l’améliorer
Réservez la largeur et la hauteur, ou le ratio d’aspect, des médias, prévoyez une zone fixe ou bornée pour les modules dynamiques, et évitez d’injecter du contenu au-dessus d’un contrôle déjà visible. Si une police modifie ses métriques, choisissez une police de secours compatible ou ajustez la stratégie de chargement des polices. Vérifiez à nouveau le focus clavier et les points de rupture responsive après chaque modification.
Limites et erreurs fréquentes
Ne supprimez pas des transitions légitimes déclenchées par l’utilisateur uniquement pour améliorer une métrique. L’objectif est une mise en page prévisible avant et pendant la lecture, et non un score artificiel détaché de l’interface.
Un contrôle CLS ciblé comporte trois passages : chargement à froid, état après interaction et point de rupture responsive. Lors d’un chargement à froid, notez l’élément qui a bougé et la ressource tardive qui en est la cause. Dans un état après interaction, distinguez une extension lancée par l’utilisateur d’une insertion inattendue au-dessus du contrôle actif. Sur un point de rupture, vérifiez si une image, un emplacement publicitaire ou une bannière de consentement perd sa géométrie réservée. Une correction concrète consiste à fixer la largeur et la hauteur, ou un ratio d’aspect, du conteneur de l’image avant l’arrivée des octets de l’image, puis à vérifier que la grille, l’ordre de focus et la position de défilement restent stables sur un écran étroit. Ne réservez pas un espace excessif et arbitraire simplement pour faire baisser la métrique : la page doit toujours sembler délibérée.