Images far below the initial viewport can wait until a reader scrolls near them. Native loading="lazy" lets the browser defer those downloads without a JavaScript observer.
<img src="diagram.webp" alt="A simple network diagram" loading="lazy" width="1200" height="800">Ne chargez pas paresseusement la première image importante
- Use loading="eager" or omit lazy loading for the likely largest contentful image.
- Fournissez la largeur et la hauteur, ou un rapport hauteur/largeur, afin que la mise en page réserve de l'espace avant l'arrivée du fichier.
- Utilisez des sources réactives lorsque plusieurs tailles d’image sont disponibles.
Mesurer sur la vraie page
Les navigateurs choisissent quand récupérer une image paresseuse, ne la traitez donc pas comme une planification réseau exacte. Vérifiez la priorité de chargement de l'image du contenu principal et confirmez que les images inférieures ne décalent pas le texte lorsqu'elles apparaissent.
L’objectif est d’éviter les téléchargements précoces inutiles tout en protégeant la première vue significative. Appliquez le chargement paresseux de manière sélective, et non comme règle générale pour chaque image.
