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.

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).

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.

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.

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 :

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.

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.

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.

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.