Table des matières
Mis à jour le
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 :
[pastacode lang= »markup » manual= »%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%22%20data-lazy-src%3D%22mon-image.jpg%22%20alt%3D%22%22%20width%3D%2250%22%20height%3D%2250%22%20%2F%3E » message= » » highlight= » » provider= »manual »/]
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 :
[pastacode lang= »markup » manual= »%3Cimg%20src%3D%22data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%22%20data-lazy-src%3D%22mon-image.jpg%22%20alt%3D%22%22%20width%3D%2250%22%20height%3D%2250%22%20%2F%3E%0A%3Cnoscript%3E%3Cimg%20src%3D%22mon-image.jpg%22%20alt%3D%22%22%20width%3D%2250%22%20height%3D%2250%22%20%2F%3E%3C%2Fnoscript%3E » message= » » highlight= » » provider= »manual »/]
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.
