Lazy loading : optimiser la performance de votre site Internet

Si vous souhaitez optimiser la performance de votre site Internet, vous tomberez tôt ou tard sur le terme « lazy loading ». Cette méthode permet d’améliorer les temps de chargement, en particulier sur les sites Internet incluant de nombreuses données telles que des images et des vidéos.

Qu’est-ce que le lazy loading et comment fonctionne cette méthode ?

Lors de la consultation d’un site Internet, le navigateur charge toutes les ressources nécessaires pour afficher la page de la façon désirée. Tous les objets sont alors chargés, même s’ils ne se trouvent pas dans la zone visible, mais « below the fold » (fr. : en dehors du champ de vision). Certains temps de chargement sont toutefois inutiles et les développeurs peuvent les empêcher en utilisant le lazy loading. À l’aide d’un script tel que LazyLoad, le navigateur charge uniquement les images et les autres données lorsqu’elles apparaissent dans le « viewport » (la zone de visualisation) de l’utilisateur, par exemple en faisant défiler la page ou en augmentant la taille de la fenêtre du navigateur.

Le plus simple pour expliquer le fonctionnement de la méthode LazyLoad est de prendre l’exemple des objets image : afin de pouvoir utiliser le lazy loading, vous devez ajuster le marquage de la balise img. À la place de l’attribut src, cette méthode utilise un attribut data indiquant la source correspondante. Lorsque l’image apparaît dans la zone visible, le script correspondant ajoute l’attribut src à l’aide de l’attribut data et l’image apparaît. Afin de rendre le processus de chargement plus attrayant, vous pouvez utiliser des effets de « fade-in » (fr. fondu) ou de « slide-in » (fr. diaporama).

Comment utiliser le lazy loading ?

Il existe différentes façons d’intégrer le lazy loading dans votre projet Web. L’intégration de la méthode LazyLoad a été constamment développée et améliorée au fil du temps. Dans les paragraphes suivants, nous vous présentons quelques-unes des solutions les plus appréciées pour l’implémentation de ce processus.

Le lazy loading avec JavaScript

Il existe aujourd’hui une multitude de modèles JavaScript pour le lazy loading que vous pouvez intégrer en toute simplicité à votre site Internet. Le script LazyLoad déjà évoqué constitue par exemple une solution légère sans jQuery. En plus de la possibilité d’installer le lazy loading natif pour les images, les vidéos et les iFrames, ce script de 2,4 Ko (kilooctets) supporte notamment les images « responsives ».

Le script Lazy Load Remastered de Mika Tuupola constitue une alternative à LazyLoad. Contrairement à ce dernier, il s’appuie sur jQuery et permet plusieurs effets attrayants tels qu’une technologie de floutage.

Lazy loading natif

Le lazy loading natif est le moyen le plus simple d’intégrer la méthode Lazy load dans votre projet Web. Initialement, cette méthode était uniquement disponible dans le navigateur Google Chrome (à partir de la version 75) mais elle fonctionne aujourd’hui dans Firefox, Edge et Opera. Pour pouvoir profiter de cette possibilité, il suffit d’ajouter l’attribut loading correspondant aux contenus du site Internet :

<img src="exemple.png" loading="lazy" alt="…">
<iframe src="https://exemple-domaine.fr" loading="lazy" alt="…"></iframe>

En dehors de la valeur « lazy » pour le lazy loading, les valeurs suivantes sont également à votre disposition :

  • eager : le navigateur charge l’objet directement lors de la consultation de la page ;
  • auto : le navigateur décide si l’objet est chargé directement ou avec un délai.

L’avantage du lazy loading natif est que le navigateur n’a pas à charger de bibliothèque JavaScript supplémentaire. De cette façon, vous pouvez non seulement éviter des temps de chargement supplémentaires, mais aussi garantir que le navigateur charge également les images avec Lazy load lorsque l’utilisateur désactive JavaScript.

Le lazy loading avec l’API Intersection Observer

Si vous intégrez le lazy loading avec JavaScript, le navigateur vous demandera constamment la position des objets. Il peut en résulter des effets secondaires désagréables tels que des à-coups mais aussi une charge sur le serveur. Avec l’API Intersection Observer, les choses se passent différemment : l’interface surveille les modifications apportées aux éléments en lien avec un élément parent donné. Cet élément parent est souvent le viewport. Si l’objet se recoupe avec l’élément parent ou si l’écart entre les éléments est modifié dans une certaine mesure, l’Intersection Observer exécute une fonction Callback et affiche l’élément.

Conseil

À l’heure actuelle, le lazy loading natif ne fonctionne pas dans Safari (que ce soit sous macOS ou iOS). Mais comme Safari supporte l’API Intersection Observer, vous pouvez utiliser un polyfill basé sur l’Observer.

Lazy Loading via un plugin WordPress

Si vous avez créé votre site Internet avec WordPress, vous pouvez intégrer le lazy loading en toute simplicité à l’aide d’un plugin, par exemple avec le plugin a3 Lazy Load. En dehors des images et des vidéos, cette extension supporte également la méthode Lazy Load avec d’autres contenus intégrés.

Le lazy loading et le problème du pixel de suivi

Les exploitants utilisent souvent un pixel pour suivre le comportement des utilisateurs sur leur site Internet. Parfois, ces pixels de suivi sont uniquement intégrés dans la zone non visible. Si vous appliquez le lazy loading à toutes les images, le navigateur charge donc le pixel de suivi uniquement lorsqu’il se trouve dans la zone visible. En procédant de cette façon, vous perdez des chiffres essentiels sur les clics et les conversions.

Selon la variante utilisée, vous pouvez également faire en sorte que le pixel de suivi soit chargé de manière séparée, directement lorsque la page est consultée :

  • Lazy loading natif : ajoutez l’attribut loading="eager" au pixel de suivi ;
  • Lazy loading avec JavaScript : attribuez au pixel de suivi une classe spécifique que vous exclurez dans le code JavaScript. Vous pouvez également attribuer une classe à tous les objets que le navigateur doit charger via Lazy load et appliquer le script explicitement à cette classe.

Tableau récapitulatif des avantages et inconvénients du lazy loading

Avantages Inconvénients
Performance améliorée Peut impacter l’expérience utilisateur : par exemple le backtracking n’est pas possible avec une structure de page défavorable.
La charge représentée par le trafic est moins importante pour l’hôte Code supplémentaire en cas d’intégration avec JavaScript
  Des librairies externes peuvent être nécessaires
  L’intégration JavaScript présuppose que l’utilisateur autorise les scripts

Nom de domaine en .alsace
Renforcez votre présence en ligne
locale avec le .alsace

9 € HT la 1ère année (10,80 € TTC), puis 60 € HT/an (72 € TTC)
.fr
1 € HT la 1ère année
puis 10 € HT/an
.alsace
9 € HT la 1ère année
puis 60 € HT/an
.com
1 € HT la 1ère année
puis 10 € HT/an
.org
1 € HT la 1ère année
puis 15 € HT/an