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-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 :

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
Avatar de l’auteur

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

6 commentaires

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.

Ajouter un commentaire
Votre adresse e-mail ne sera pas publiée. Tous les champs doivent être remplis. Politique de commentaires : Nous apprécions les commentaires et le temps que les lecteurs consacrent à partager leur avis. Cependant, tous les commentaires sont modérés manuellement et ceux qui sont considérés comme du spam ou uniquement promotionnels seront supprimés.

Obtenez un site plus rapide en quelques clics

Installation en 3 minutes chrono

Achetez WP Rocket Qu’attendez-vous?

{"cart_token":"","hash":"","cart_data":""}