Lazy Loading : qu'est-ce que c'est et comment l'implémenter pour le SEO
Lorsqu'il s'agit d'utiliser des plateformes en ligne telles que des sites web, la vitesse de chargement et l'optimisation deviennent essentielles, les utilisateurs exigeant de plus en plus de rapidité et de réactivité.
Pour cette raison, le design pattern de page connu sous le nom de lazy loading prend de plus en plus d'importance. Mais qu'est-ce que le lazy loading (chargement différé) exactement ?
C'est ce que nous allons aborder ci-dessous.
Qu'est-ce que le Lazy Loading ?
Concrètement, le lazy loading est une technique, un design pattern de programmation appliqué aux sites web, dans lequel les éléments et les ressources ne sont pas chargés entièrement, mais exécutés à la volée ou à la demande selon l'utilisation de l'utilisateur, produisant un « chargement différé » des contenus.
De cette manière, les ressources sont optimisées et les contenus tels que le texte, les vidéos, les images et autres ne se chargent que lorsque cela est requis, ce qui améliore la vitesse, l'utilisation de la mémoire et le traitement, la réactivité et les temps de chargement. Cela contraste avec le chargement complet, où un site ou une page est chargée intégralement, même si l'utilisateur n'utilise pas tous les éléments.
Avantages généraux du lazy loading
Étant donné que l'objectif principal du lazy loading est d'optimiser le chargement des éléments uniquement lorsqu'ils sont utilisés, il existe de nombreux avantages que l'on peut résumer ainsi :
- Rapidité d'affichage des éléments principaux d'un site web.
- Amélioration significative de l'expérience utilisateur sur le site (UX).
- Amélioration des performances sur les appareils mobiles, en particulier lorsqu'ils disposent de ressources de connexion réseau limitées ; avoir le Lazy Loading actif permettra la navigation sur des pages qui, dans de telles conditions de mauvaise couverture, seraient autrement impossibles.
- Optimisation générale et totale des ressources telles que le CPU, la RAM et la batterie sur les appareils mobiles.
- L'augmentation du dwell time sur nos pages, en n'ayant pas de problèmes de chargement, se traduit indirectement par des améliorations du classement.
- Diminution du taux de rebond.
De même, l'approche de programmation lazy loading présente des avantages et des nouveautés d'un point de vue plus technique, tels que :
- Le lazy loading est entièrement compatible avec les frameworks JS tels que React et Angular, ainsi qu'avec les plateformes CMS comme WordPress. En fait, il a récemment été annoncé que le lazy loading pour les images sera inclus par défaut dans la version 5.5 de WordPress.
- Grâce à l'API IntersectionObserver, il ne cache pas les images aux moteurs de recherche.
- Prise en charge de plusieurs types de contenu tels que les images et les ressources de classe responsive.
- Il permet aux images du site d'être indexées, ce qui est vital pour le SEO.
- C'est une ressource SEO Friendly à 100 %, car elle améliore directement et indirectement de nombreux points clés en SEO.
Comment implémenter le lazy loading dans WordPress ?
Si nous avons notre site sur WordPress, nous devons savoir que nous avons un grand avantage car il existe de nombreuses solutions pour implémenter le lazy loading sur nos pages afin qu'elles se chargent beaucoup plus rapidement. Cette capture d'écran ci-dessous montre certaines des solutions possibles que nous avons dans le répertoire de plugins :
Vue des plugins WordPress les plus en vue pour implémenter le lazy loading.
Pour effectuer cette implémentation, nous avons plusieurs options :
- Choisir un plugin spécifique de lazy loading tel que « Lazy loader », « a3 lazy load »...
- Choisir un plugin d'optimisation web comme « WP Rocket », qui inclut déjà cette option par défaut avec d'autres améliorations.
Aspects SEO liés au Lazy Loading
Nous connaissons déjà la mission principale du chargement différé et ses avantages clés, et comment cela affecte l'amélioration des performances de notre page, de notre UX et du SEO.
Maintenant, il faut faire une utilisation intelligente du chargement différé pour en tirer le meilleur parti, car s'il est mal utilisé, il pourrait provoquer l'effet inverse.
Par exemple, le lazy loading utilise le cache pour améliorer la vitesse, donc si trop de contenu y est stocké, des ralentissements ou des erreurs peuvent survenir s'il n'est pas correctement implémenté, empêchant même Google d'indexer des pages et des éléments, ce qui peut avoir un effet grave sur le classement du site. Voici quelques conseils :
- Optimiser le cache et l'utiliser intelligemment.
- Utiliser Google Search Console pour vérifier le contenu que Google explore sur le site.
- Ajouter du texte ALT pour rendre chaque image indexable par Google.
- Toujours utiliser l'API IntersectionObserver.
- Ajouter l'attribut loading aux iframe ou au contenu intégré d'autres pages ou sources, grâce à la fonction Blink LazyLoad du navigateur Chrome. S'applique aux images, photos, vidéos, textes et autres contenus.
Lazy loading et UX
Lorsqu'il s'agit d'un site web, l'optimisation tant technique que générale pour offrir une bonne expérience utilisateur (UX) est essentielle, en ce qui concerne les temps de chargement, la réactivité, l'utilisation des ressources et le comportement général. Si un site n'est pas très réactif, son taux de rebond sera élevé, et s'il offre une mauvaise expérience utilisateur, cela affectera son trafic, sa visibilité et même son SEO.
Avec le chargement différé, l'objectif est d'améliorer considérablement l'UX d'un site en une seule étape, en chargeant son contenu progressivement et au moment où l'utilisateur le requiert lorsqu'il fait défiler la page, qu'il s'agisse d'images ou de texte, ce qui optimise l'utilisation des ressources par rapport au chargement de l'ensemble de la plateforme, qui montre probablement des éléments qui ne sont pas importants pour l'utilisateur.
Lazy loading natif (HTML) dans Chrome
Démontrant l'importance que Google accorde à l'UX, depuis 2020 et à partir de la version 75 de son navigateur Chrome, il est possible d'ajouter un lazy loading natif aux balises HTML des pages et à leur contenu multimédia tel que photos, vidéos, entre autres.
De cette manière, en ajoutant automatiquement l'attribut HTML lazy loading, le navigateur Chrome comprend que le contenu de la page se chargera selon la navigation de l'utilisateur et non tout d'un coup, ce qui améliore la vitesse et la réactivité. Pour l'utiliser, l'attribut loading avec la valeur lazy est ajouté à chaque balise des ressources visuelles et multimédias, ainsi qu'aux iframes :
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Cette ressource peut être utilisée à la fois dans les images, qui représentent une grande partie des informations que le navigateur doit télécharger, et dans les iframes ; rappelez-vous que nous les utilisons pour intégrer des ressources externes dans notre site.
Il est important de souligner l'utilisation dans les iframes, car ceux-ci peuvent représenter des points de chargement critiques sur notre site.
Comme inconvénient, le lazy loading natif n'est compatible qu'avec Chrome, bien que son utilisation puisse être implémentée dans d'autres navigateurs via des bibliothèques compatibles, au cas où il n'y aurait pas de support comme cela arrive dans Mozilla Firefox.
Utilisations du Lazy loading
Comme nous l'avons déjà commenté, le lazy loading se concentre sur le retard du chargement des éléments d'une page pour optimiser sa réponse. En ce sens, l'utilisation donnée à l'outil se concentre sur toutes les ressources visuelles, bien que l'accent soit mis sur les images, les vidéos et les iframes qui peuvent inclure des documents et d'autres fichiers, le tout via la modification des balises et l'inclusion de l'attribut loading avec la valeur lazy, optimisant la vitesse générale du site même s'il a des éléments lourds ou un grand contenu multimédia.
Avez-vous des questions sur le lazy loading ou souhaitez-vous l'implémenter dans votre projet ? Nous sommes à votre disposition !
Documentation et références :
Auteur : David Kaufmann
Cela fait plus de 10 ans que je suis totalement obsédé par le SEO — et honnêtement, je ne voudrais pas qu'il en soit autrement.
Ma carrière a franchi un cap lorsque j'ai travaillé comme Senior SEO Specialist pour Chess.com — l'un des 100 sites les plus visités de tout Internet. Opérer à cette échelle, sur des millions de pages, des dizaines de langues et dans l'une des SERPs les plus concurrentielles qui soient, m'a appris des choses qu'aucun cours ni aucune certification ne pourrait jamais transmettre. Cette expérience a transformé ma vision de ce qu'est réellement un SEO d'excellence — et elle est devenue le socle de tout ce que j'ai construit depuis.
Forcé par cette expérience, j'ai fondé SEO Alive — une agence pour les marques qui prennent la croissance organique au sérieux. Nous ne sommes pas là pour vendre des dashboards et des rapports mensuels. Nous sommes là pour bâtir des stratégies qui font vraiment la différence, en combinant le meilleur du SEO classique avec le nouvel univers passionnant de la Generative Engine Optimization (GEO) — afin que votre marque apparaisse non seulement dans les liens bleus de Google, mais aussi dans les réponses générées par l'AI que ChatGPT, Perplexity et Google AI Overviews livrent chaque jour à des millions de personnes.
Et parce que je ne trouvais aucun outil capable de gérer correctement ces deux mondes, j'en ai construit un moi-même — SEOcrawl, une plateforme d'intelligence SEO pour les entreprises qui réunit rankings, audits techniques, monitoring des backlinks, santé du crawl et suivi de la visibilité de marque dans l'AI, le tout au même endroit. C'est la plateforme dont j'ai toujours rêvé.
Découvrez plus de contenu de cet auteur
