Table des matières

Parmi les fonctionnalités de WP Rocket, l’une des plus appréciées est très certainement le LazyLoad.

Le fonctionnement du LazyLoad de WP Rocket

Le principe du LazyLoad est assez simple. Il consiste à afficher les images d’une page uniquement quand elles sont visibles par l’internaute. Cette technique permet d’améliorer considérablement le temps de chargement d’un site puisque le chargement des images non visibles est différé.

Pour charger l’image au moment où le visiteur doit l’apercevoir, c’est un léger script JavaScript de moins de 2ko qui s’occupe de la transition.

Par défaut, notre plugin ajoute du LazyLoad sur :

  • les images à la une, c’est-à-dire toutes les images appelées avec the_post_thumbnail().
  • les images présentes dans un article dont le contenu est récupéré avec the_content().
  • les images présentes dans les widgets Texte de WordPress.
  • les avatars.
  • les smileys.

Si des images de votre thème ne rentrent pas dans l’une de ces conditions, WP Rocket ne sera pas en mesure de faire son travail. En effet, pour mettre en place le LazyLoad, notre plugin modifie quelque peu la balise <img> des images.

Tout d’abord,  le contenu de l’attribut src est remplacé par une data-URI. Ensuite,  l’attribut data-lazy-src est ajouté et  sa valeur est égale au chemin réel de l’image.

Voici un exemple d’une image profitant du LazyLoad :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-lazy-src="mon-image.jpg" alt="" width="50" height="50" />

Ajouter le LazyLoad sur une image non traitée par WP Rocket

Pour cela, il vous suffit de respecter le même principe :

  • l’attribut src doit être remplacé par le data-URI (le code tout bizarre juste au-dessus).
  • le chemin réel de votre image dans être inséré dans un nouvel attribut nommé data-lazy-original.

En ajoutant cela sur vos images, vous n’avez rien d’autre à faire. C’est la partie JavaScript de notre LazyLoad qui s’occupera de la transition pour vous faire profiter de cette fonctionnalité.

Faciliter le référencement des images avec LazyLoad

Pour faciliter l’indexation des images utilisants le lazyLoad, il est recommandé d’ajouter une balise <noscript> contenant la balise <img> d’origine.

Voici un exemple d’utilisation :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-lazy-src="mon-image.jpg" alt="" width="50" height="50" />
<noscript><img src="mon-image.jpg" alt="" width="50" height="50" /></noscript>

Ainsi, les moteurs de recherche auront aucune difficulté à indexer l’image d’origine.

Cette astuce peut être ajoutée sur n’importe quelle image et elle est à consommer sans modération.


Ajoutez un commentaire
Votre adresse mail ne sera pas publiée. Tous les champs doivent être remplis. Politique de commentaires : nous aimons les commentaires et apprécions le temps que les lecteurs passent à partager leurs idées et à donner leur avis. Cependant, tous les commentaires sont modérés manuellement et ceux qui sont considérés comme du spam ou purement promotionnels seront supprimés.
Comments (6)

Bonjour Jonathan,
Bien pratique cette astuce.
Je commente surtout pour deux choses :
- félicitations pour votre nouveau blog, belle initiative :)
- j'ai vu que vous WP Rocket était reconnu par Dareboost. La classe !
David

@David : Merci pour ton commentaire. Le blog est officiellement lancé, tu aura plus d'informations sur cet article : https://blog.wp-rocket.me/ouverture-blog-wp-rocket/

Salut Jonathan,
Bien joué pour ce blog, il est vraiment très utile :)

Concernant la balise noscript qui est ajoutée dans les 5 cas que tu cites, ne conseillerais-tu pas également de l'ajouter avec la balise IMG d'origine pour les images sur lesquelles on ajoute manuellement le LazyLoad ?

C'est fait sur mon blog, et ça marche du tonnerre !

@geoffrey: Merci pour ta remarque, j'avais oublié de parler de ce détail. J'ai modifié l'article en conséquence :)

Bonjour,
là http://www.site-analyzer.com/fr/audit/http://noaneo.fr/#report-page-5
l'url est indiqué en erreur 404, que faire?
Merci

@noaneo: Désolé pour le temps de réponse. Ceci est un faux-positif, votre outil considère le data-URI comme une 404.


Derniers articles de Temps de chargement et cache
S’abonner à notre newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Obtenez un site Web plus rapide
en quelques clics

Installation en 3 minutes chrono