Parmi les leviers qu’on peut utiliser pour réduire les temps de chargement sur son site, il y en a un qui est particulièrement efficace : le Lazyload. Le principe est très simple : au lieu de charger toutes les images et les vidéos en même temps que le reste des fichiers à l’affichage de la page, un script les télécharge et les affiche au fur et à mesure que l’utilisateur scrolle et découvre les contenus.
Parallèlement à ça, le script peut également apposer un « placeholder » qui permettra de respecter le layout de la page.
Petite présentation d’un script que vous pouvez utiliser n’importe où, et d’un module WordPress. Particulièrement efficace sur un serveur Nginx, ce genre de script vous sauvera la mise sur un site qui contient beaucoup d’images… Si vous ne savez pas comment installer Nginx sur votre serveur, je vous renvoie à ce tutoriel pour démarrer.
Un script de lazyloading à utiliser n’importe où
Le script que je vais vous présenter a été développé par Andrea Verlicchi. Honnêtement, c’est le premier script que j’ai trouvé sur Google en tapant « script Lazyload » pour ce tutoriel. Je l’ai utilisé sur un site développé en dur il y a quelques semaines, et il fonctionne très bien.
La doc est très complète et permet de charger les images directement, ou d’utiliser une version alternative redimensionnée.
Pour charger le script le plus facilement possible, on charge ce script dans le head (faites attention à la version utilisée, se référer à la doc pour connaitre la dernière) :
https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js
Et pour charger votre image en Lazyload, au lieu d’écrire :
Vous écrivez :
Pour appeler le script dans le code source :
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
});
Le lien vers la doc complète : https://www.andreaverlicchi.eu/lazyload/
Utiliser un plug-in WordPress : A3 Lazy Load
On trouve des dizaines de plug-ins de Lazyload sur le dépôt de WordPress. Ici, je vais vous présenter A3 Lazy load. La configuration est assez simple, même s’il y a beaucoup d’options…
Plugin Framework Global Settings
Customize Admin Setting Box Display
Open Box Display : pour ouvrir les accordéons automatiquement. Les modifications sont enregistrées à chaque fois que vous cliquez sur le bouton « Save changes » en bas de page.
House Keeping
Clean up on Deletion : pour retirer tout contenu et les tables du module si vous le désinstallez
Lazy Load Activation
Enable Lazy Load : pour activer ou désactiver le module…
Lazy Load Images
Enable Lazy Load for Images : active le Lazyload pour les images en général
Images in Content : active le Lazyload pour les images dans le contenu, ce qui sous-entend uniquement le contenu des pages ou des posts (pas dans le header, pas dans le footer, pas dans la sidebar).
Images in Widgets : active le Lazyload pour les images qui sont contenues dans un widget
Post Thumbnails : active le Lazyload pour les miniatures des articles
Gravatars : active le Lazyload pour les images d’avatar des commentaires
Skip Images Classes : cette fonction permet d’indiquer quelles images ne doivent pas être chargée grâce aux Lazyload. Si vous constatez que le chargement d’une image plante pour une raison quelconque, vous pouvez ainsi la sortir de la file de traitement en indiquant simplement la classe CSS qui lui est rattachée.
Noscript Support : si les utilisateurs désactivent le JavaScript sur leur navigateur, cette fonction permet d’afficher quand même les images. Autant dire que ça servira très peu, mais vous pouvez quand même l’activer.
Lazy Load Videos and iframes
Video and iframes : active le Lazyload pour les vidéos et les iframes (les vidéos que vous mettez depuis YouTube, Dailymotion, mais aussi les tweets etc.).
In Content : active le Lazyload pour les vidéos dans le contenu.
In Widgets : active le Lazyload pour les vidéos dans les widgets
Skip Videos Classes : comme pour les images, permet de renseigner la classe CSS des vidéos que vous ne souhaitez pas « Lazyloader ».
Noscript Support : pareil, pour les utilisateurs qui ont désactivé JavaScript, permet de charger tout de même les vidéos ou les iframes.
Exclude by URI’s and Page Types
Exclude by URIs
Une fonctionnalité super pratique qui permet de désactiver le script globalement sur une page complète en renseignant simplement son URI.
Page Type Exclusions
Home Page : désactiver le script sur la page qui contient tous les articles
Front Page : désactiver le script sur la page d’accueil
Posts : désactiver le script sur les articles
Pages : désactiver le script sur les pages
Post Categories : désactiver le script sur les catégories d’articles
Post Tags : désactiver le script sur la page des tags
Search Page : désactiver le script sur la page de recherche
Author Pages : désactiver le script sur la page des auteurs
Archive Pages : désactiver le script sur les autres pages d’archives (par date etc.).
Script Load Optimization
Theme Loader Function : pour choisir l’emplacement où vous apposez le script (dans le header ou dans le footer). Dans le header, il permettra de lancer la fonction plus vite au chargement de la page.
WordPress Mobile Template Plugins
Effect & Style
Loading Effect : pour choisir l’effet visuel du chargement des images. Soit fondu, soit « spinner ». Perso, je trouve que l’effet de fondu est beaucoup plus naturel et élégant.
Loading Background Colour : pour choisir la couleur d’arrière-plan du placeholder (choisissez la même couleur que le fond de votre page).
Image Load Threshold
Threshold : normalement, un script de Lazyload affiche les images quand on les scrolle. Mais ici, vous pouvez anticiper sur le scroll, et cette option permet donc de définir la distance entre le contenu vu et la prochaine image à charger. Par exemple, si vous mettez « 200 », les images situées 200 pixels sous le contenu vu seront préchargées. Ainsi, vos visiteurs ne verront ni l’effet de fondu, ni le Spinner. Cela permet d’avoir une intégration parfaite.
