Le chargement différé natif des images (loading=lazy)
Activez loading="lazy" pour différer les images hors écran sans JavaScript. Pages plus rapides, bande passante économisée, meilleur SEO.
Les images sont le type de ressource le plus demandé du web et consomment plus de bande passante que toute autre. Au 90e centile, les sites envoient plus de 5 Mo d’images sur ordinateur comme sur mobile. Le chargement différé natif permet de ne charger les images hors écran qu’au moment où l’internaute s’en approche, directement via l’attribut loading, sans bibliothèque JavaScript.
C’est une optimisation à fort retour sur investissement pour le SEO. En allégeant le chargement initial, vous libérez de la bande passante pour les ressources critiques, vous accélérez l’affichage du contenu visible et vous améliorez les Core Web Vitals : un complément naturel au travail pour optimiser ses images. Avantage supplémentaire : la solution native fonctionne aussi quand on s’appuie sur le navigateur plutôt que sur du code tiers.
Le chargement différé natif fait partie de ces optimisations à fort retour qu’on aurait tort de compliquer avec une bibliothèque JavaScript : l’attribut loading suffit désormais. Le seul piège, et il est récurrent, c’est de l’appliquer à l’image au-dessus de la ligne de flottaison, ce qui retarde votre LCP au lieu de l’améliorer. Protégez l’image visible, différez le reste.
L'attribut loading et ses valeurs
L’attribut loading s’ajoute sur les balises img pour indiquer au navigateur comment charger l’image. La valeur par défaut est eager : l’image est chargée immédiatement, où qu’elle soit sur la page. La valeur lazy diffère le chargement jusqu’à ce que l’image atteigne une distance définie de la fenêtre d’affichage.
La valeur auto, autrefois disponible, est abandonnée : il n’est pas prévu de chargement différé automatique des images dans Chrome. Définir eager explicitement reste utile si un outil ou un linter de votre chaîne ajoute lazy par défaut. Avec l’élément picture, l’attribut loading se place toujours sur l’img enfant, jamais sur picture.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">| Valeur | Comportement | Quand l'utiliser |
|---|---|---|
eager |
Charge l’image immédiatement (défaut) |
Images visibles au chargement, image LCP |
lazy |
Diffère jusqu’à l’approche de la fenêtre |
Images hors écran, sous la ligne de flottaison |
auto |
Valeur abandonnée, à ne plus utiliser |
Aucun cas (historique) |
Protéger l'image au-dessus de la ligne de flottaison
N’utilisez loading= »lazy » que pour les images en dehors de la fenêtre d’affichage initiale. Le navigateur ne peut différer une image qu’une fois sa position connue : pour une image visible au chargement, il devra donc attendre la mise en page, ce qui ralentit l’affichage. Sur une image candidate au LCP, l’impact négatif peut être massif.
La bonne pratique consiste à charger normalement les images visibles d’emblée et à réserver lazy aux visuels hors écran. Sur une grille de produits par exemple, les premières vignettes restent en chargement normal, et seules les suivantes passent en lazy, exactement la logique à suivre pour ne jamais différer l’image LCP.
<!-- visibles dans la fenetre d'affichage -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<!-- images hors ecran -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">Distance de déclenchement et compatibilité
Le seuil de distance à partir duquel le navigateur déclenche le chargement varie selon le type de connexion et le type d’image. En juillet 2020, Chrome a réduit ce seuil de 3000px à 1250px sur les connexions rapides, et de 4000px à 2500px sur les connexions plus lentes, pour se rapprocher du comportement des bibliothèques JavaScript. Ces valeurs sont codées en dur et ne se règlent pas via une API.
L’attribut loading est pris en charge par tous les navigateurs majeurs : Chrome 77, Edge 79, Firefox 75 et Safari 15.4. Pour le cas standard, plus besoin de JavaScript ni d’IntersectionObserver : la même approche s’étend d’ailleurs au fait de différer images et iframes. Les navigateurs incompatibles ignorent simplement l’attribut, sans effet négatif.
Définissez toujours width et height (ou des dimensions via style) pour réserver l’espace et limiter le CLS. Sans dimensions, une image vaut 0 x 0 pixel, et une galerie entière peut être jugée visible puis chargée d’un coup. Attention aussi aux images masquées : avec display: none elles ne se chargent pas, mais avec opacity: 0 elles se chargent quand même. Testez toujours votre implémentation.
À faire
- différer les images hors écran avec lazy
- charger normalement les images visibles
- définir width et height
- tester sur différentes tailles d’écran
À éviter
- différer l’image LCP ou du haut de page
- utiliser la valeur auto abandonnée
- oublier les dimensions
- ajouter du JavaScript inutile pour un cas géré nativement
Points clés à retenir
- Appliquez loading="lazy" uniquement aux images hors écran.
- Laissez le chargement par défaut sur l'image LCP et le haut de page.
- Sur picture, placez loading sur l'img enfant.
- Définissez width et height pour éviter le CLS.
- L'attribut est géré par tous les navigateurs majeurs : pas de JS requis.
Le chargement différé natif allège les pages sans JavaScript.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Sur quelles images faut-il appliquer loading="lazy" ?
- Sur toutes les images de la page, y compris celles du haut
- Uniquement sur les images en dehors de la fenêtre d'affichage initiale
- Sur l'image LCP en priorité pour accélérer son affichage
On n’utilise
loading="lazy"que pour les images hors de la fenêtre initiale. Différer une image visible au chargement obligerait à attendre la mise en page et ralentirait l’affichage. -
Pourquoi faut-il toujours définir width et height sur une image différée ?
- Pour forcer le navigateur à charger l'image immédiatement
- Pour augmenter la priorité de chargement de l'image
- Pour réserver l'espace et limiter le CLS, car sans dimensions une image vaut 0 x 0 pixel
Sans dimensions, une image vaut 0 x 0 pixel et provoque des décalages. Définir
widthetheightréserve l’espace et limite le Cumulative Layout Shift. -
Peut-on régler soi-même la distance à partir de laquelle le navigateur déclenche le chargement ?
- Non, les seuils sont codés en dur dans le navigateur et dépendent du type de connexion et d'image
- Oui, via un attribut HTML dédié sur la balise img
- Oui, en modifiant la valeur de l'attribut loading
Les seuils de distance sont codés en dur dans le navigateur et varient selon le type de connexion et d’image. Ils ne sont pas modifiables via une API.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Un chargement différé mal réglé peut ralentir votre image principale et nuire à votre LCP.