Lorsqu'une image ou une intégration se charge sans espace réservé, tout ce qui se trouve en dessous se déplace. Définissez des dimensions intrinsèques ou un rapport hauteur/largeur afin que le navigateur puisse présenter la page avant de télécharger le contenu.
<img src="article-photo.webp" width="1200" height="800" alt="A small boat in a harbor">.video-frame {
aspect-ratio: 16 / 9;
background: #eee;
}
Réservez de l'espace pour plus que des images
- Définissez un rapport hauteur/largeur pour la vidéo et les médias intégrés.
- Utilisez une hauteur minimale stable pour une région qui recevra du contenu asynchrone.
- Évitez d'insérer une bannière au-dessus de la position de lecture actuelle sans réserver son espace.
Mesurer le changement
Utilisez les outils de performances du navigateur pour rechercher les changements de mise en page et confirmer que le correctif concerne l'élément qui déplace la page. Un espace réservé qui change de taille après le chargement peut recréer le même problème.
Une géométrie stable aide les gens à garder leur place et permet une expérience de page plus fluide. Les bonnes dimensions doivent refléter le contenu plutôt que d'être devinées pour un score.