La plus grande image visible à l'ouverture d'une page peut affecter la rapidité avec laquelle le contenu principal apparaît. Les astuces de chargement doivent refléter ce qui est visible dans la mise en page réelle, et pas seulement le rôle d'une image dans le fichier de conception.
Vérifiez la page rendue
- Conservez l’image principale au-dessus de la ligne de flottaison visible dans le code HTML initial.
- Définissez les dimensions afin que le texte ne saute pas pendant le chargement de l'image.
- Évitez de précharger plusieurs images concurrentes ou de charger paresseusement l’image principale probable.
Utilisez une trace des performances du navigateur et un panneau réseau pour confirmer quelle ressource constitue l'élément de contenu le plus important. Revérifiez les largeurs mobiles, car la première image peut différer selon la mise en page.