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 :

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-original 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-original="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 :

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-original="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