Lazy loading : optimiser la per­for­mance de votre site Internet

Si vous souhaitez optimiser la per­for­mance 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 char­ge­ment, en par­ti­cu­lier sur les sites Internet incluant de nom­breuses données telles que des images et des vidéos.

Lors de la con­sul­ta­tion d’un site Internet, le na­vi­ga­teur charge toutes les res­sources né­ces­saires 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 char­ge­ment sont toutefois inutiles et les dé­ve­lop­peurs peuvent les empêcher en utilisant le lazy loading. À l’aide d’un script tel que LazyLoad, le na­vi­ga­teur charge uni­que­ment les images et les autres données lorsqu’elles ap­pa­rais­sent dans le « viewport » (la zone de vi­sua­li­sa­tion) de l’uti­li­sa­teur, par exemple en faisant défiler la page ou en aug­men­tant la taille de la fenêtre du na­vi­ga­teur.

Le plus simple pour expliquer le fonc­tion­ne­ment 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 cor­res­pon­dante. Lorsque l’image apparaît dans la zone visible, le script cor­res­pon­dant ajoute l’attribut src à l’aide de l’attribut data et l’image apparaît. Afin de rendre le processus de char­ge­ment plus attrayant, vous pouvez utiliser des effets de « fade-in » (fr. fondu) ou de « slide-in » (fr. diaporama).

Il existe dif­fé­rentes façons d’intégrer le lazy loading dans votre projet Web. L’in­té­gra­tion de la méthode LazyLoad a été cons­tam­ment dé­ve­lop­pée et améliorée au fil du temps. Dans les pa­ra­graphes suivants, nous vous pré­sen­tons quelques-unes des solutions les plus ap­pré­ciées pour l’im­plé­men­ta­tion de ce processus.

Il existe aujourd’hui une multitude de modèles Ja­vaS­cript pour le lazy loading que vous pouvez intégrer en toute sim­pli­cité à votre site Internet. Le script LazyLoad déjà évoqué constitue par exemple une solution légère sans jQuery. En plus de la pos­si­bi­lité d’installer le lazy loading natif pour les images, les vidéos et les iFrames, ce script de 2,4 Ko (ki­looc­tets) supporte notamment les images « res­pon­sives ».

Le script Lazy Load Re­mas­te­red de Mika Tuupola constitue une al­ter­na­tive à LazyLoad. Con­trai­re­ment à ce dernier, il s’appuie sur jQuery et permet plusieurs effets at­trayants tels qu’une tech­no­lo­gie de floutage.

Le lazy loading natif est le moyen le plus simple d’intégrer la méthode Lazy load dans votre projet Web. Ini­tia­le­ment, cette méthode était uni­que­ment dis­po­nible dans le na­vi­ga­teur Google Chrome (à partir de la version 75) mais elle fonc­tionne aujourd’hui dans Firefox, Edge et Opera. Pour pouvoir profiter de cette pos­si­bi­lité, il suffit d’ajouter l’attribut loading cor­res­pon­dant aux contenus du site Internet :

En dehors de la valeur « lazy » pour le lazy loading, les valeurs suivantes sont également à votre dis­po­si­tion :

• eager : le na­vi­ga­teur charge l’objet di­rec­te­ment lors de la con­sul­ta­tion de la page ;
• auto : le na­vi­ga­teur décide si l’objet est chargé di­rec­te­ment ou avec un délai.

L’avantage du lazy loading natif est que le na­vi­ga­teur n’a pas à charger de bi­blio­thèque Ja­vaS­cript sup­plé­men­taire. De cette façon, vous pouvez non seulement éviter des temps de char­ge­ment sup­plé­men­taires, mais aussi garantir que le na­vi­ga­teur charge également les images avec Lazy load lorsque l’uti­li­sa­teur désactive Ja­vaS­cript.

Si vous intégrez le lazy loading avec Ja­vaS­cript, le na­vi­ga­teur vous demandera cons­tam­ment la position des objets. Il peut en résulter des effets se­con­daires dé­sa­gréables tels que des à-coups mais aussi une charge sur le serveur. Avec l’API In­ter­sec­tion Observer, les choses se passent dif­fé­rem­ment : l’interface surveille les mo­di­fi­ca­tions 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’In­ter­sec­tion 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 sim­pli­cité à 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 ex­ploi­tants utilisent souvent un pixel pour suivre le com­por­te­ment des uti­li­sa­teurs sur leur site Internet. Parfois, ces pixels de suivi sont uni­que­ment intégrés dans la zone non visible. Si vous appliquez le lazy loading à toutes les images, le na­vi­ga­teur charge donc le pixel de suivi uni­que­ment lorsqu’il se trouve dans la zone visible. En procédant de cette façon, vous perdez des chiffres es­sen­tiels sur les clics et les con­ver­sions.

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

• Lazy loading natif : ajoutez l’attribut loading="eager" au pixel de suivi ;
• Lazy loading avec Ja­vaS­cript : attribuez au pixel de suivi une classe spé­ci­fique que vous exclurez dans le code Ja­vaS­cript. Vous pouvez également attribuer une classe à tous les objets que le na­vi­ga­teur doit charger via Lazy load et appliquer le script ex­pli­ci­te­ment à cette classe.