Pour corriger un déplacement de contenu, repérez ce qui apparaît ou change de taille juste avant le mouvement. Réserver l'espace nécessaire peut stabiliser une page ; masquer l'élément gênant sans comprendre sa fonction peut seulement déplacer le problème. Commencez par une séquence de chargement reproductible.
Observer le mouvement, pas seulement la valeur
Le CLS décrit les décalages de mise en page selon une méthode d'agrégation définie. Un score ne dit pas à lui seul quel composant corriger. Enregistrez la page et recherchez la zone qui se déplace, puis l'élément dont la modification provoque ce déplacement.
Notez l'état du cache, la largeur et le moment du mouvement. Une image déjà en cache peut cacher un défaut visible lors d'une première visite. Un bandeau affiché seulement après une réponse distante peut ne pas apparaître dans chaque essai.
Donner une place aux éléments attendus
Inventoriez les éléments chargés après le contenu initial : illustrations, vidéos, suggestions, informations de compte ou encarts. Pour chacun, définissez la place attendue avant l'arrivée des données. La solution doit rester cohérente quand le composant reçoit un contenu plus court, plus long ou une erreur.
Ne fixez pas arbitrairement une hauteur qui tronque le texte. Préparez plusieurs états, puis choisissez une stratégie d'espace ou de disposition qui conserve la lecture. Une correction visuelle doit rester utilisable avec le zoom et sur un écran étroit.
Exemple fictif : un encart de disponibilité
Imaginons une fiche d'atelier affichant d'abord le titre et le bouton de réservation. Une réponse distante ajoute ensuite un encart de disponibilité au-dessus du bouton. Au moment où la personne cherche à agir, le bouton descend.
Dans une version de test, prévoyez un emplacement identifiable pour cette information dès le début. Essayez les réponses « disponible », « complet » et « disponibilité inconnue ». Comparez la position du bouton pendant chaque séquence, sans inventer une disponibilité lorsque la réponse tarde.
La fiche de vérification conserve les états simulés et les captures avant et après chargement. Le cas est fictif : les délais sont des conditions d'essai choisies, pas des observations de trafic réel. Contrôlez aussi qu'un espace inutile ne reste pas affiché indéfiniment lorsque l'encart n'a aucune information à apporter.
Vérifier les images et la typographie
Les dimensions des images doivent correspondre à la place prévue. Le guide sur les images responsives aide à relier la ressource et sa largeur d'affichage. Un texte peut aussi changer d'encombrement lorsqu'une police arrive : examinez les polices réellement chargées avant de modifier les marges du composant.
Rejouez enfin les séquences complètes, pas uniquement le premier écran. Une page peut sembler stable au chargement et déplacer son contenu lors d'une interaction ultérieure. Conservez les limites de l'essai et les états qui n'ont pas été reproduits.
Questions fréquentes
Faut-il supprimer tous les contenus dynamiques ?
Non. Leur place et leurs états doivent être pensés. Une information utile peut être ajoutée sans bouleverser le parcours, à condition de tester son arrivée et son absence.
Une hauteur fixe résout-elle toujours le problème ?
Non. Elle peut couper un texte long ou créer un grand vide. Éprouvez le composant avec plusieurs contenus et au zoom avant de conserver cette solution.
Pourquoi le déplacement n'apparaît-il pas à chaque visite ?
Le cache, les délais réseau, les données reçues et l'état de la session peuvent varier. Décrivez précisément les conditions qui font apparaître le mouvement pour pouvoir vérifier la correction.
Sources
Documentation consultée lors de la relecture du 10 septembre 2026.