Installer un script de Lazyload

Installer un script de Lazyload

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.

Charles Annoni

Charles Annoni

Développeur Front-End et Formateur

Charles Annoni accompagne les entreprises dans leur développement sur le web depuis 2008. Il est également formateur dans l’enseignement supérieur.