Un changement de mise en page se produit lorsque le contenu visible change de position sans que le visiteur ne le déplace. Une trace de performances peut relier le mouvement à l'élément qui a changé et à la ressource ou au script qui l'a provoqué.
Capturez le mouvement
- Enregistrez une nouvelle navigation avec le panneau de performances du navigateur.
- Ouvrez les événements de changement de disposition et inspectez les nœuds concernés et leur chronologie environnante.
- Répétez l’opération avec la limitation du réseau pour exposer les images, les polices, les intégrations ou les données qui arrivent en retard.
Réservez de l'espace avant l'arrivée du contenu
Donnez des dimensions stables aux images et aux vidéos, réservez un emplacement pour les intégrations et les publicités et évitez d'insérer des bannières au-dessus du texte une fois que la page est déjà visible. Pour les polices, comparez les mesures de secours et finales au lieu de masquer le texte pendant le chargement d'un fichier.
Ne traitez pas chaque changement comme un bug CSS. Une étiquette changeante, un message de validation ou un résultat asynchrone peut nécessiter une présentation stable ou une interaction plus claire. Vérifiez le changement sur une fenêtre mobile représentative et sur un chargement de page réel.