Lazy loading : définition et impact sur la vitesse

Le lazy loading, c'est quoi ? Définition, fonctionnement, exemple de code et erreurs à éviter pour gagner en vitesse de chargement sur votre site.

Lazy loading : la définition

Le lazy loading est une technique web qui consiste à ne charger que les images et les contenus visibles à l'écran, et à ne les charger qu'au moment où ils deviennent utiles. On parle en français de chargement différé, parfois de chargement paresseux. Le navigateur télécharge d'abord le strict nécessaire pour afficher le haut de la page. Les images situées plus bas attendent que le visiteur commence à défiler dans la page.

Voilà pour le principe du lazy loading. Le lazy loading ne supprime aucun contenu : il étale le travail du navigateur dans le temps. On croise aussi le terme lazy load, ou l'expression anglaise to load an image, pour désigner la même idée. Le chargement se fait au fur et à mesure de la navigation, et non en une seule fois au départ.

À quoi sert le lazy loading ?

Sur un site vitrine comme sur une boutique, les visuels représentent la plus grosse part du poids d'une page. Les réclamer tous dès l'arrivée du visiteur allonge le temps de chargement sans aucun bénéfice immédiat. Le chargement différé permet de réduire ce poids initial, donc d'accélérer le premier affichage. L'effet se voit surtout sur mobile, où le débit est plus faible.

Un temps de chargement plus court sur le premier écran, celui que l'internaute voit en arrivant.
Moins de données consommées, en particulier sur les connexions mobiles.
Une expérience utilisateur plus confortable : la page devient lisible plus vite.
Des performances mieux notées par les outils de mesure de Google.
Un serveur moins sollicité quand les visites sont nombreuses.

Ces gains comptent pour le référencement. Google évalue la vitesse de chargement perçue à travers les Core Web Vitals, et une page lente perd des positions. Le confort de lecture entre aussi en jeu, ce qui rejoint la logique du SXO. Pour un dirigeant, la traduction est simple : moins d'abandons, plus de formulaires remplis.

Comment fonctionne le lazy loading ?

L'attribut loading, en une ligne de HTML

Le chargement différé est aujourd'hui intégré aux navigateurs. Il suffit d'ajouter l'attribut loading à une balise img ou à une iframe. La valeur loading="lazy" demande un chargement différé, la valeur eager impose l'inverse. Aucun script n'est nécessaire, et le code reste compatible avec les vieux navigateurs : ils ignorent l'attribut et chargent tout, sans rien casser.

La ligne de flottaison, le bon repère

La ligne de flottaison est la limite basse de ce que l'on voit sans faire défiler l'écran. Tout ce qui se trouve au-dessus de la ligne doit arriver tout de suite : logo, titre, visuel principal, bouton d'appel. Ce qui vient en dessous peut patienter. Cette frontière bouge selon la taille de l'écran, donc on raisonne par zones plutôt qu'au pixel près, comme pour le responsive design.

Les modules JavaScript et les CMS

Le principe dépasse les images. Un module JavaScript peut lui aussi se charger en différé, grâce à un import dynamique, ce qui allège le fichier envoyé au départ. Les frameworks front comme React ou Angular s'en servent pour découper une application en morceaux. Sur un CMS comme WordPress, un plugin ou le cœur du logiciel applique souvent ce comportement par défaut.

Un exemple concret sur une page de référence

Prenons une page qui présente douze photos de chantier et une vidéo de démonstration. Sans lazy loading, le navigateur réclame les douze fichiers et le lecteur vidéo d'un seul coup. Avec le chargement différé, il n'en demande que deux ou trois, puis complète pendant que le visiteur descend. Le code tient en un attribut par élément.

Le résultat se mesure, il ne se devine pas. Un test avant et après sur PageSpeed Insights montre l'écart de poids et le temps gagné. Profitez-en pour renseigner l'attribut alt de chaque image : le chargement différé ne dispense jamais de décrire le contenu.

Les erreurs courantes à éviter

Appliquer loading="lazy" au visuel principal : le premier affichage devient plus lent, pas plus rapide.
Oublier la largeur et la hauteur des images, ce qui fait sauter la mise en page pendant le défilement.
Différer des éléments déjà visibles, comme un logo ou un bandeau d'en-tête.
Empiler un plugin de lazy load et l'attribut natif : les deux mécanismes se gênent.
Tout miser sur cette seule technique, alors qu'un CDN et des images bien compressées pèsent souvent davantage.

Une dernière vigilance : certaines galeries et certains carrousels faits maison cassent le mécanisme, car ils injectent les images en JavaScript après le chargement de la page. Il faut alors tester le comportement réel, et non faire confiance au code sur parole. Nous contrôlons ce point à chaque refonte de site internet, avant la mise en ligne.

Questions fréquentes

C'est l'attribut loading posé sur une balise img ou sur une iframe. Avec la valeur lazy, le navigateur attend que l'élément approche de la zone visible pour le télécharger. Cette méthode est la plus simple et la plus fiable, puisqu'elle ne demande aucune bibliothèque extérieure.

Oui, à condition de bien le poser. Il raccourcit le temps d'affichage du premier écran, un critère que Google prend en compte. En revanche, un texte masqué derrière un chargement différé risque d'échapper à l'indexation. On le réserve donc aux images, aux iframe et aux scripts secondaires.

Eager signifie tout de suite : le navigateur charge l'élément sans attendre. Lazy signifie plus tard : il patiente jusqu'à ce que le visiteur approche. En pratique, on met eager sur les visuels du haut de page et lazy sur tout le reste, ce qui suffit à la plupart des sites.