Causes des décalages de mise en page
Pagespeed vous avertit des changements de mise en page lorsque des éléments changent de position sans interaction de l'utilisateur alors que la page est encore en cours de chargement.
Les décalages de mise en page se produisent lorsque des éléments se déplacent sans aucune interaction de l'utilisateur. Étudiez les causes des décalages de mise en page, comme l'ajout ou la suppression d'éléments, ou le changement de polices lors du chargement de la page
Comprendre les décalages de mise en page
PageSpeed signale ce problème lorsque des éléments déjà chargés changent de position de manière autonome, parce que d'autres éléments sont chargés ou transformés. Cela nuit à l'expérience utilisateur, car les éléments se déplacent pendant que les visiteurs tentent d'interagir avec la page.
Quelques causes courantes : éléments injectés, animations non optimisées, images non redimensionnées et polices Web lentes.
Comment améliorer les changements de mise en page avec WP Rocket
- Reporter l’exécution du JavaScript : Lorsque JavaScript est utilisé pour injecter ou manipuler des éléments.
- Ajouter les dimensions d'image manquantes : Indique au navigateur de réserver l'espace nécessaire aux images.
- LazyLoad pour les iframes et les vidéos : Stabilise l'image d'aperçu, réduisant ainsi les mouvements causés par l'injection vidéo.
- Précharger les polices : Les polices à chargement lent peuvent modifier leur apparence et leur taille pendant le chargement de la page (FOUT - Flash of Unstyled Text).
- Supprimer les ressources CSS inutilisées : Peut aider à réduire les modifications de mise en page causées par un chargement lent du CSS.