Qu'est-ce que le lazy loading ?

Qu'est-ce que le lazy loading ?

Le lazy loading (chargement différé) est une technique qui retarde le chargement d'une ressource jusqu'au moment où elle est nécessaire, en général quand l'utilisateur s'en approche en faisant défiler la page. Les images, iframes et morceaux de JavaScript hors écran au départ sont téléchargés plus tard, et le navigateur a moins à charger avant d'afficher la partie visible.

Comment fonctionne le chargement différé

Images et iframes : l'attribut loading

Avec loading="lazy" sur un <img> ou un <iframe>, le navigateur attend que l'élément approche du viewport. La distance est choisie par le navigateur et ne peut pas être modifiée. Le chargement différé des images fonctionne dans Chrome 77, Edge 79, Firefox 75 et Safari 15.4 ou plus récent ; un navigateur qui ne connaît pas l'attribut l'ignore et charge l'image normalement (source : web.dev).

<img src="team.jpg" loading="lazy" alt="Our team" width="800" height="600">

Renseignez toujours width et height. Sans eux, le navigateur ne peut pas réserver l'espace, la page saute à l'arrivée de l'image et votre Cumulative Layout Shift augmente. Voir taille des images pour choisir les dimensions.

JavaScript : Intersection Observer et import() dynamique

Pour ce que l'attribut ne couvre pas, comme un lecteur vidéo ou un widget lourd, un Intersection Observer signale quand un élément entre dans le viewport ou en sort, et votre code lance le travail à ce moment (voir MDN sur le lazy loading). Un rootMargin déclenche le chargement un peu avant, si bien que l'utilisateur voit rarement un espace vide.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

Dans une application monopage, l'import() dynamique fait la même chose pour le code : le bundle d'une route n'est téléchargé que lorsque l'utilisateur y accède, ce qui garde le premier téléchargement léger.

const Settings = () => import('./Settings.js');

Exemple : une longue page d'article

Un article contient une image principale et quinze images plus bas, ainsi qu'une vidéo intégrée. Seule l'image principale est nécessaire à la première vue. Laissez-la se charger normalement (valeur par défaut) et ajoutez loading="lazy" aux quinze autres images et à l'iframe de la vidéo. Le lecteur qui s'arrête après l'introduction ne les télécharge jamais ; celui qui défile reçoit chacune juste avant son apparition.

Erreurs courantes avec le chargement différé

• Différer l'image principale ou celle du LCP. Les images probablement visibles au chargement ne doivent pas être en lazy, car le navigateur retarde alors précisément l'élément qu'attend votre Largest Contentful Paint (web.dev donne le même conseil).
• Oublier width et height. La mise en page se décale à l'arrivée de chaque image.
• Tout différer. Le premier écran doit se charger normalement ; ne différez que ce qui se trouve en dessous.
• Cacher du contenu important derrière des scripts déclenchés par le défilement. Le texte principal doit être dans le HTML initial ; différez les médias, pas le texte.
• Démarrer trop tard. Sans marge, l'utilisateur arrive sur un espace vide et attend. Commencez à charger un peu avant.
• Croire que cela supprime du travail. Le chargement différé repousse le téléchargement. Un script lent exécuté plus tard reste lent.

Chargement différé, tests et surveillance

Les fichiers à chargement différé sont demandés au défilement : un test qui ne défile jamais ne les télécharge jamais. Un audit de vitesse peut donc sembler plus léger que ce que charge un lecteur qui parcourt toute la page. Pour le tableau d'ensemble, 10 étapes pour accélérer votre site et pourquoi optimiser les images reprennent la liste complète.

Pour voir l'effet sur des métriques réelles, vérifiez le LCP et le CLS de votre page avec le vérificateur gratuit de Core Web Vitals, qui lit les données de terrain du Chrome UX Report. Pour les suivre après chaque mise en production, la surveillance de vitesse de LoadFocus lance des audits Lighthouse planifiés et vous alerte quand une métrique bouge.

Questions fréquentes : lazy loading

Faut-il mettre loading="lazy" sur toutes les images ?

Non. Les images en haut de page, surtout celle qui est votre élément Largest Contentful Paint, doivent se charger normalement. Réservez le chargement différé aux images situées sous le premier écran.

Le lazy loading aide-t-il ou nuit-il au SEO ?

Il aide quand il ne diffère que des images et iframes hors de la zone visible, car la page devient plus rapide. Il nuit quand du texte ou des liens à indexer se trouvent derrière un script qui attend le défilement. Gardez le contenu important dans le HTML initial.

Quelle différence entre lazy loading et code splitting ?

Le code splitting est une étape de build qui découpe votre JavaScript en fichiers séparés. Le lazy loading est le choix, à l'exécution, de ne télécharger l'un de ces fichiers qu'au moment voulu. Les bundlers font le premier, l'import() dynamique le second.

Peut-on différer les images d'arrière-plan CSS ?

Pas avec l'attribut loading, qui ne concerne que les images et les iframes. Utilisez si possible un vrai élément img, ou un Intersection Observer qui applique l'arrière-plan quand l'élément approche du viewport.

Quels navigateurs prennent en charge loading="lazy" ?

Chrome 77, Edge 79, Firefox 75 et Safari 15.4 et versions ultérieures le prennent en charge pour les images. Les autres ignorent l'attribut et chargent l'image tout de suite : rien ne casse.