Chargement paresseux des images
Chargez les images hors écran uniquement lors du défilement.
Ce que c’est
Le chargement paresseux signifie que les images en dehors de la zone visible ne sont pas chargées immédiatement, mais uniquement lorsque l'utilisateur les fait défiler. L'attributloading="lazy" est suffisant.
Pourquoi c’est important
Sans chargement paresseux, le navigateur télécharge même des images tout en bas de la page que l'utilisateur ne verra peut-être jamais, ce qui retarde le premier rendu et gaspille des données. Le chargement paresseux accélère le démarrage et enregistre le transfert.
Comment faire
- 1Ajoutez chargement = "lazy" aux images et iframes sous la zone visible.
- 2N'utilisez PAS de paresseux sur l'image principale au-dessus de la ligne de flottaison (l'image LCP) - vous voulez celle-ci le plus tôt possible (préchargez-la si nécessaire).
- 3Spécifiez toujours la largeur et la hauteur afin que la mise en page ne saute pas (CLS).
Exemple
<img src="gallery-12.webp" alt="..." loading="lazy" width="800" height="600">Conclusion
Le chargement paresseux est aujourd'hui natif (un attribut) et accélère les pages contenant de nombreuses images presque gratuitement. Faites simplement attention à l’image principale au-dessus de la ligne de flottaison – ne la rendez pas paresseuse. Ajoutez des dimensions pour la stabilité de la mise en page.
Sujets liés