Lazy loading
Lazy loading : charger seulement ce qui est visible
Le lazy loading retarde le chargement des images et des cadres situés hors de l'écran, jusqu'à ce que le visiteur s'en approche. Il allège le premier affichage et réduit les données transférées. Mal appliqué, il retarde au contraire l'élément principal de la page.
<img src="photo.webp" loading="lazy" width="800" height="600">
Comment se met en place un lazy loading
Les navigateurs modernes le proposent en natif, par un attribut sur la balise image ou sur le cadre intégré. Aucune bibliothèque n’est nécessaire dans la plupart des cas.
| Élément | Traitement recommandé |
|---|---|
| Image principale en haut de page | Chargement immédiat, jamais différé |
| Images plus bas dans la page | Différées |
| Cadres de vidéo et de carte | Différés |
| Logos et icônes légers | Chargement immédiat |
L’erreur qui coûte des points de performance
Appliquer le chargement différé à l’image principale. Le navigateur attend alors de savoir qu’elle est visible avant de la demander, ce qui retarde l’affichage du plus grand élément et dégrade la mesure d’expérience.
Cette erreur vient presque toujours d’un réglage global posé sur toutes les images du site, sans exception pour le haut de page.
Lazy loading et référencement
Les moteurs chargent les pages et déclenchent le chargement différé natif. Une implémentation maison qui attend une action du visiteur, un défilement ou un clic, peut en revanche laisser le contenu invisible pour le robot.
Le réglage natif est donc préférable au script sur mesure.
Ce que le lazy loading n’améliore pas
La vitesse globale de la page une fois entièrement parcourue. Il déplace la charge, il ne la supprime pas.
Les confusions fréquentes et ce qui les sépare
- Mise en cache
- Le cache évite de retélécharger un fichier déjà obtenu. Le lazy loading retarde un premier téléchargement encore inutile.
- Compression d'image
- La compression réduit le poids du fichier. Le lazy loading ne change pas son poids, il décale le moment où il arrive.
Mis à jour le