Comment ajouter le LazyLoad de WP Rocket sur d’autres images ?

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

À propos de

Jonathan is Lead Project on WP Rocket. Addicted to WordPress and Co-organizer of WordCamp Paris & Lyon.

6 commentaires

Commenter

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 🙂

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs requis sont indiqués par des *