Chargement différé des images au niveau du navigateur pour le Web

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Vous pouvez utiliser l'attribut loading pour charger les images de manière différée sans avoir à écrire de code de chargement différé personnalisé ni à utiliser une bibliothèque JavaScript distincte. Voici une démonstration de cette fonctionnalité:

Cette page explique en détail comment implémenter le chargement différé dans le navigateur.

Pourquoi le chargement différé au niveau du navigateur ?

Selon l'Archive HTTP, les images sont le type d'éléments le plus demandé sur la plupart des sites Web. Elles occupent généralement plus de bande passante que toute autre ressource. Au 90e percentile, les sites envoient plus de 5 Mo d'images sur ordinateur et sur mobile.

Auparavant, il existait deux façons de différer le chargement des images hors écran:

• Utiliser l'API Intersection Observer
• Utilisation des gestionnaires d'événements scroll, resize ou orientationchange

Les deux options permettent aux développeurs d'inclure un comportement de chargement paresseux. De nombreux développeurs ont créé des bibliothèques tierces pour fournir des abstractions encore plus faciles à utiliser.

Toutefois, comme le navigateur est compatible avec le chargement différé, aucune bibliothèque externe n'est nécessaire. Le chargement différé au niveau du navigateur garantit également que le chargement des images fonctionne toujours, même si le client désactive JavaScript. Notez toutefois que le chargement n'est différé que lorsque JavaScript est activé.

Attribut loading

Chrome charge les images selon différentes priorités en fonction de leur emplacement par rapport au viewport de l'appareil. Les images situées en dessous de la fenêtre d'affichage sont chargées avec une priorité inférieure, mais elles sont toujours extraites lors du chargement de la page.

Vous pouvez utiliser l'attribut loading pour différer complètement le chargement des images hors écran:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Voici les valeurs acceptées pour l'attribut loading:

• lazy: différez le chargement de la ressource jusqu'à ce qu'elle atteigne une distance calculée par rapport à la fenêtre d'affichage.
• eager: comportement de chargement par défaut du navigateur, qui est identique à celui obtenu si vous n'incluez pas l'attribut. Cela signifie que l'image est chargée quel que soit son emplacement sur la page. Il s'agit de la valeur par défaut, mais il peut être utile de la définir explicitement si votre outil ajoute automatiquement loading="lazy" en l'absence de valeur explicite ou si votre analyseur lint se plaint si elle n'est pas définie explicitement.

Relation entre l'attribut loading et la priorité de récupération

La valeur eager est une instruction qui permet de charger l'image comme d'habitude, sans retarder davantage le chargement si l'image est hors écran. Il ne charge pas l'image plus rapidement qu'une autre image qui ne comporte pas d'attribut loading.

Si vous souhaitez augmenter la priorité de récupération d'une image importante (par exemple, l'image LCP), utilisez la priorité de récupération avec fetchpriority="high".

Une image avec loading="lazy" et fetchpriority="high" est toujours retardée lorsqu'elle est hors écran, puis récupérée avec une priorité élevée lorsqu'elle est presque dans le viewport. Cette combinaison n'est pas vraiment nécessaire, car le navigateur chargerait probablement cette image en priorité de toute façon.

Seuils de distance par rapport à la fenêtre d'affichage

Toutes les images visibles immédiatement sans défilement se chargent normalement. Les images situées bien en dessous du champ de vision de l'appareil ne sont récupérées que lorsque l'utilisateur fait défiler la page à proximité.

L'implémentation du chargement différé de Chromium vise à s'assurer que les images hors écran sont chargées suffisamment tôt pour qu'elles soient terminées au moment où l'utilisateur les fait défiler. Pour ce faire, elles sont récupérées bien avant qu'elles ne deviennent visibles dans la fenêtre d'affichage.

Le seuil de distance varie en fonction des facteurs suivants:

• Type de ressource image récupérée
• Type de connexion compatible

Vous trouverez les valeurs par défaut des différents types de connexion efficaces dans la source Chromium. Vous pouvez tester ces différents seuils en limitant le débit du réseau dans DevTools.

Amélioration des seuils d'économie de données et de distance par rapport au viewport

En juillet 2020, Chrome a apporté des améliorations significatives pour aligner les seuils de distance du chargement différé des images par rapport au viewport afin de mieux répondre aux attentes des développeurs.

Sur les connexions rapides (4G), nous avons réduit le seuil de distance par rapport au viewport de Chrome de 3000px à 1250px. Sur les connexions plus lentes (3G ou moins), nous avons modifié le seuil de 4000px à 2500px. Cette modification a deux objectifs:

• <img loading=lazy> se rapproche de l'expérience proposée par les bibliothèques de chargement différé JavaScript.
• Les nouveaux seuils de distance par rapport au viewport signifient toujours que les images seront probablement chargées au moment où l'utilisateur les a fait défiler.

Vous trouverez ci-dessous une comparaison entre les anciens et nouveaux seuils de distance par rapport au viewport pour l'une de nos démonstrations sur une connexion rapide (4G) :