Chargement différé (lazy loading)

Qu'est-ce que le lazy loading (chargement différé) ?

Le lazy loading, ou chargement différé, est une technique qui retarde le téléchargement d'une image, d'une vidéo, d'un iframe ou d'un contenu tant qu'il n'est pas sur le point d'entrer dans le viewport du visiteur, plutôt que de tout télécharger dès le chargement de la page. Tout ce qui se trouve sous la ligne de flottaison, comme les images en bas d'un long article, attend que le visiteur s'en approche en scrollant avant que le navigateur ne demande le fichier. Cela réduit le volume de données transférées au premier chargement, ce qui accélère le rendu et diminue la consommation de bande passante pour le visiteur comme les coûts d'hébergement pour le propriétaire du site.

Le principe s'applique bien au-delà des images : les applications web à page unique diffèrent le chargement de blocs entiers de JavaScript ou de routes, les catalogues e-commerce chargent les fiches produits au fil du scroll dans une grille, et les lecteurs vidéo ne chargent le lecteur lui-même qu'au moment nécessaire plutôt que d'embarquer son script complet sur chaque page. Le fil conducteur de tous ces cas est de reporter un coût, qu'il s'agisse d'octets téléchargés, de JavaScript à interpréter ou d'une connexion tierce ouverte, jusqu'au moment où le navigateur en a réellement besoin.

‍

Comment fonctionne le lazy loading

Les navigateurs modernes prennent en charge le lazy loading nativement via un simple attribut HTML, sans JavaScript pour le cas de base :

<img src="hero-bas-de-page.jpg" loading="lazy" alt="Vitrine produit" width="800" height="500">

L'attribut loading="lazy" indique au navigateur de ne télécharger cette image que lorsqu'elle approche du viewport. Avant l'existence du support natif (et encore aujourd'hui pour un contrôle plus fin), les sites utilisaient une bibliothèque JavaScript basée sur l'API Intersection Observer, qui surveille un élément et déclenche un callback dès qu'il franchit un seuil défini à proximité du viewport, ce qui lance le chargement réel de l'image ou du contenu à ce moment-là. Ce seuil est en général fixé quelques centaines de pixels avant que l'élément ne devienne visible, ce qui laisse au navigateur une longueur d'avance pour que le contenu soit prêt au moment où le visiteur y arrive vraiment.

‍

Ce qui peut être chargé en différé

• Images : le cas le plus courant, pris en charge nativement via loading="lazy" sur la balise <img>.
• Iframes : vidéos intégrées, cartes ou widgets, également pris en charge via le même attribut loading="lazy" sur <iframe>.
• Modules ou routes JavaScript : découpage du code d'une application web pour que le code d'une route ne se télécharge que lorsqu'un visiteur y navigue.
• Scripts tiers : widgets de chat, widgets d'avis ou trackers différés jusqu'après le rendu du contenu critique de la page.
• Polices web et images de fond : typographies non critiques ou fonds décoratifs chargés seulement quand la section correspondante entre dans le viewport.

‍

Lazy loading vs chargement immédiat

‍

Bonnes pratiques et pièges courants

• Ne jamais charger en différé l'image hero ou tout ce qui est visible sans scroller : cela retarde la métrique Largest Contentful Paint au lieu de l'améliorer, puisque le navigateur doit attendre avant même de démarrer la requête.
• Toujours définir des attributs width et height explicites sur les images en lazy loading pour que le navigateur réserve le bon espace et évite un décalage de mise en page une fois l'image chargée.
• Associer le lazy loading aux images responsives (srcset) pour que le navigateur choisisse aussi la bonne taille de fichier selon l'écran du visiteur, plutôt que de charger en différé un fichier surdimensionné.
• Tester sur une connexion bridée : une page trop agressivement chargée en différé peut afficher des trous visibles pendant un scroll rapide si le seuil de déclenchement est trop proche du bord du viewport.
• Ne pas différer un contenu qu'un visiteur atteindra très probablement en une ou deux secondes de scroll, comme la deuxième section d'une landing page : le gain marginal justifie rarement le risque d'un flash de vide visible.

‍

Pourquoi ça compte pour la performance et le SEO

Le lazy loading réduit directement le volume total d'octets téléchargés au premier chargement, ce qui améliore le temps de chargement, les scores Core Web Vitals et la consommation de données mobiles, autant de facteurs de positionnement et d'expérience utilisateur que les moteurs de recherche pèsent directement. Les robots d'indexation gèrent en général correctement l'attribut natif loading="lazy" et indexent malgré tout les images différées ; bien mis en œuvre, le lazy loading améliore donc la performance sans masquer de contenu aux résultats de recherche. Le risque n'apparaît que lorsqu'il est implémenté avec un JavaScript sur mesure qui ne se déclenche jamais pour un robot qui ne scrolle pas la page. C'est l'une des rares optimisations qui améliore à la fois le score technique de performance et l'expérience réelle des visiteurs sur connexion lente, avec presque aucun compromis quand elle est bien configurée.

‍

Le lazy loading chez BeBranded

Nous appliquons le lazy loading de façon systématique sur les pages riches en images, les portfolios et les catalogues produits que nous développons, tout en gardant les visuels hero et le contenu visible sans scroller en chargement immédiat pour que le premier rendu reste rapide. Nous auditons chaque projet par rapport aux seuils Core Web Vitals avant sa mise en ligne, et le lazy loading fait partie des leviers standards que nous ajustons aux côtés de la compression d'image et du cache CDN. Voir notre service website pour savoir comment nous traitons la performance et les Core Web Vitals sur les sites que nous construisons.