Lazy loading : les bases expliquées

Qu'est-ce que le lazy loading ?

Le lazy loading (chargement différé) consiste à empêcher le chargement des images et autres ressources de votre page Web jusqu'à ce que l'utilisateur en ait besoin. Les ressources au-dessus de la ligne de flottaison s'afficheront, mais les images plus bas ne seront chargées qu'en faisant défiler jusqu'à l'endroit où elles se trouvent.

Généralement, sans lazy loading d'images, le navigateur télécharge chaque ressource quand l'utilisateur arrive sur la page, avant même de la construire pour visualisation.

Si vous avez cliqué sur un lien et attendu longtemps avant que tout s'affiche, c'est probablement que cette page contient beaucoup de ressources longues à télécharger. Ce type de délai peut amener une personne à abandonner une page Web, surtout si cela se produit avec chaque lien sur la page sur laquelle elle clique.

Lorsque vous implémentez le lazy loading, au lieu que le navigateur charge toutes les ressources, une image d'espace réservé apparaîtra là où l'image est censée aller.

Au fur et à mesure que l'utilisateur défile, il peut même voir cet espace réservé avant que le navigateur n'insère l'image qui est censée être là. Cette méthode de chargement des images peut augmenter le temps de chargement de votre page, améliorant ainsi l'expérience utilisateur. Cela est particulièrement vrai pour les sites Web qui hébergent beaucoup d'images ou d'iframes. Bien qu'il soit important de savoir ce que signifie le lazy loading des images, vous devez également comprendre que le lazy loading ne s'applique pas uniquement aux images. Diverses ressources peuvent bénéficier d'un lazy loading, mais le lazy loading des images reste la fonction principale.

Lazy loading ou Eager loading

Maintenant que nous avons examiné le lazy loading (chargement différé), discutons du eager loading (chargement anticipé) pour comparaison.

Alors que le lazy loading évite les téléchargements inutiles, l'eager loading fait le contraire. Avec l'eager loading, toutes les images sont immédiatement chargées dès que quelqu'un ouvre le site Web.

Lorsque les utilisateurs arrivent sur une page utilisant l'eager loading, ils peuvent voir des indicateurs de chargement ou devoir attendre tous les téléchargements et rendus. Cela signifie aussi que même si l'utilisateur ne va jamais plus loin sur la page, toutes les images seront quand même téléchargées, c'est l'inverse du lazy loading.

L'eager loading avantage les sites Web qui ont très peu d'images ou des images très optimisées, mais pour la plupart, cette méthode ralentit considérablement la page Web.

Pourtant, pour les sites à forte charge de texte et ceux qui possèdent des ressources très légères, l'eager loading peut bien fonctionner. Par exemple, un site comme Wikipédia bénéficie fortement du eager loading.

Avantages du lazy loading

Les avantages du lazy loading (chargement différé) ne sont pas seulement l'augmentation des vitesses de chargement du site Web. Le lazy loading offre également d'autres avantages, tels que :

Des temps plus rapides de chargement du site Web

Les petits sites Web et les ressources de petite taille se chargeront rapidement. Le lazy loading permet de réduire la taille initiale d'un site Web, ce qui l'aide à se charger plus rapidement dans le navigateur.

Un site Web plus rapide offre de nombreux avantages. En utilisant le lazy loading, vous pouvez améliorer les conversions, augmenter et enrichir l'expérience utilisateur et rendre le site beaucoup plus convivial pour le SEO.

Utilisation réduite de la bande passante

Lorsque vos images sont chargées avec le lazy loading, les utilisateurs du site Web ne reçoivent que les ressources dont ils ont besoin. Cela signifie que le navigateur n'aura pas besoin de gaspiller la bande passante en téléchargeant des images que l'utilisateur ne verra jamais. Cela peut entraîner une réduction appréciable de l'utilisation de la bande passante au fil du temps.

Si votre site a beaucoup d'images de fichiers de grande taille, conserver l'utilisation de la bande passante peut faire une énorme différence dès le départ. Cette conservation de la bande passante vous profite, à vous et à l'utilisateur. Étant donné que vous ne servez pas ces ressources, vous réduisez également l'utilisation de la bande passante pour vos serveurs.

Une expérience utilisateur améliorée

Le lazy loading améliore l'expérience utilisateur de plusieurs façons.

Personne n'aime un site lent. En fait, les sites lents donnent souvent à l'utilisateur l'impression que quelque chose ne marche pas dans l'appareil sur lequel il consulte le site. Un chargement plus rapide peut également améliorer l'expérience utilisateur de façon plus discrète. Par exemple, leur navigateur n'aura pas besoin de faire tout le gros travail de téléchargement en arrière-plan. Cela permet d'économiser les ressources de leur système et de permettre à leurs appareils de mieux fonctionner lorsqu'ils sont sur votre site Web.

Toute cette activité du navigateur fait également travailler le processeur, la batterie et d'autres ressources de l'appareil. C'est l'une des raisons pour lesquelles le lazy loading est l'une des bonnes pratiques de SEO pour mobile.

Bonnes performances de SEO

Des chargements de pages plus rapides sont un aspect essentiel de l'optimisation pour les moteurs de recherche (search engine optimization, SEO). Les moteurs de recherche pénalisent souvent les sites lents et les images représentent l'un des principaux facteurs responsables de la lenteur de chargement des sites. Si vous souhaitez améliorer les performances de votre site et son classement dans les moteurs de recherche, vous devez maximiser votre vitesse de chargement.

Inconvénients du lazy loading

Les implémentations du lazy loading peuvent se présenter sous différentes formes, et toutes les méthodes de lazy loading ne sont pas adaptées à tous les sites.

Parfois, la mise en œuvre du lazy loading peut devenir une tâche complexe, surtout si vous utilisez un CMS qui préférerait une méthode d'implémentation à une autre.

Cela signifie également que vous pouvez rencontrer des problèmes de compatibilité lorsque vous essayez d'utiliser le lazy loading. Il se peut même que vous ayez un CMS avec lazy loading inclus par défaut. Essayer un autre type d'implémentation peut créer plus de problèmes de compatibilité.

D'autres inconvénients peuvent dériver de la façon dont l'utilisateur fait défiler votre page. Si le défilement est très rapide, le lazy loading ne peut pas suivre le rythme. Cela peut nuire à certains types de sites Web. Par exemple, le développement de sites Web d'e-commerce nécessite des images qui restent affichées sur la page.

Le défilement rapide peut également créer des problèmes de mise en cache. De plus, le lazy loading crée plus d'appels de serveur et ceux-ci peuvent s'accumuler si l'utilisateur continue.

Un inconvénient potentiel final découle de la réduction des avantages de la mise en cache. La mise en cache ne fonctionne généralement que lorsque des ressources sont demandées. Les informations dans le cache peuvent aussi rester longtemps et devenir périmées ou obsolètes par la rareté de leur utilisation liée à une mise en cache lente (lazy caching).

Les inconvénients peuvent sembler nombreux, mais dans la plupart des cas d'utilisation, les avantages du lazy loading l'emportent de loin sur les éventuels inconvénients.

De nombreux inconvénients sont également liés à l'implémentation. Le lazy loading peut fonctionner de différentes manières et il est donc important de faire les bons choix. Une bonne implémentation vous donnera les meilleurs résultats possible.

Comment implémenter le lazy loading

L'implémentation du lazy loading (chargement différé) peut se faire de différentes manières. Certaines méthodes manuelles qui utilisent les CSS peuvent fonctionner pour ceux qui savent ce qu'ils font. Mais les solutions CMS qui utilisent des plug-ins ou des add-ons auront très probablement un module de lazy loading que vous pouvez installer.

Certains plug-ins et add-ons, principalement de type mise en cache, ont également tendance à avoir des options de lazy loading. Vous pouvez trouver des bibliothèques en open source avec un code JavaScript de lazy loading que vous pouvez ajouter.

Mais quelle que soit la façon dont vous implémentez le lazy loading, certaines bonnes pratiques peuvent vous permettre d'en tirer le meilleur parti. Mentionnons notamment :

• Ressources en lazy loading exclusivement sous la ligne de flottaison
• Ne mettez pas en lazy loading des ressources essentielles requises pour la fonctionnalité initiale du site ou de l'application.
• Faites attention aux erreurs de chargement d'image et corrigez-les immédiatement.
• Spécifiez des paramètres de lazy loading très stricts.
• Réduisez le code de lazy loading pour le rendre plus efficace.
• Implémentez des solutions de secours pour les navigateurs qui ne prennent pas en charge le lazy loading ou JavaScript.

De plus, comme le lazy loading ne concerne pas uniquement les images, vous devrez peut-être trouver différentes pratiques pour d'autres contenus.

Cela peut être très laborieux et il est donc préférable de faire l'implémentation d'abord, puis de traiter le reste au cas par cas et au fur et à mesure. Par exemple, lorsque vous optimisez votre site Web pour mobile, cherchez des outils pour la conception d'interface utilisateur (UI) qui vous aident à affiner le lazy loading.

Optimiser l'expérience utilisateur avec le lazy loading

Le lazy loading fonctionne comme un outil que vous pouvez utiliser pour optimiser l'expérience utilisateur et tirer parti de tous les avantages associés. Vous n'avez pas besoin de le considérer comme une opposition entre expérience utilisateur (UX) et interface utilisateur (UI) parce que le lazy loading peut améliorer les deux.

De plus, vous n'avez pas besoin de tout savoir au niveau technique lorsque vous disposez d'outils qui vous aident à accélérer votre site sans aller jusqu'au niveau du codage.

Il permet de comprendre les bases : ce qu'il faut implémenter ou quels services utiliser pour que votre site ou application fonctionne plus rapidement et efficacement. Mailchimp propose un grand nombre de solutions qui peuvent vous aider à accélérer votre site Web et à améliorer l'expérience utilisateur.

Si vous avez besoin d'intégrations, informations et autres ressources pour accélérer votre site web ou application mobile, consultez tous les outils proposés par MailChimp.