Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
Vitesse Impact moyen Facile 10 à 30 minutes

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

  1. 1Ajoutez chargement = "lazy" aux images et iframes sous la zone visible.
  2. 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).
  3. 3Spécifiez toujours la largeur et la hauteur afin que la mise en page ne saute pas (CLS).

Exemple

Correct
<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