Les sites contenant de nombreuses images peuvent prendre une éternité à charger. Chaque image implique une requête http et un temps d’attente supplémentaire pendant que les pages se chargent lentement, ce qui peut être frustrant pour vos utilisateurs.

Alors, quelle est la solution ? Le lazy loading ou chargement paresseux. Ce système peut considérablement améliorer la rapidité des sites fortement graphiques et peut être installé sur votre site en un rien de temps. Le lazy loading fait en sorte de charger uniquement les images « au-dessus du pli ». En d’autres termes, seules les images qui s’affichent dans le navigateur d’un utilisateur seront chargées. Ainsi, si votre page contient 10 nouveaux thèmes WordPress plein écran gratuits, seules les premières images de l’article se chargeront et les autres à mesure que l’utilisateur fera défiler la page.

Pour vous aider à démarrer avec le lazy loading, j’ai rassemblé une collection de plugins lazy loading gratuits pour les images, tous identiques mais différents, certains avec des options et des paramètres et d’autres avec de petites empreintes.

Optimisation d’image Smush

Smush est le plugin d’optimisation d’image tout-en-un le plus populaire pour une raison. Il inclut tout ce dont vous avez besoin pour charger vos images plus rapidement. Nous avons récemment ajouté un lazy loading à la fois à la version gratuite de Smush et à la version rapide Smush Pro, qui est fournie avec le Smush Pro CDN.

Pour activer le lazy loading avec Smush, WPMUDEV à rendu le processus extrêmement simple. Tout ce que vous avez à faire est d’aller dans la section Lazy Loading de Smush et d’appuyer sur le bouton Activer. C’est tout ! Vous pouvez ajuster vos paramètres une fois le lazy loading activé, mais ce n’est pas nécessaire. Les paramètres par défaut de Smush et Smush Pro sont tout ce dont vous avez besoin pour profiter d’une amélioration de performance importante.

a3 Lazy Load

A3 Lazy load est le deuxième plugin le plus populaire pour le lazy loading d’images, d’iframes, de vidéos et autres éléments sur votre site.

Il offre de nombreux paramètres vous permettant de personnaliser la manière dont vous voulez que les ressources de votre site soient chargées.

Il est également 100 % compatible avec les plugins populaires comme WooCommerce, Advanced Custom Fields, et une variété de CDN.

BJ Lazy Load

BJ Lazy Load vous permet le lazy load d’images sélectionnées, y compris les images d’article et les vignettes, les images Gravatar et les iFrames, et de remplacer le contenu par un générique.

Il existe des paramètres simples qui vous permettent de personnaliser le fonctionnement du plugin, tels que le choix d’un générique et le saut d’images avec des catégories.

Ce plugin permet d’optimiser la taille des images, de réduire automatiquement la taille des images dans les conceptions réactives et de servir automatiquement des images hiDPI sur des écrans hiDPI (comme l’écran Apple Retina).

Consultez la section « Comment créer des images adaptées à un écran Retina qui ne ralentissent pas WordPress » si vous souhaitez en savoir plus sur la diffusion d’images en haute résolution.

Lazy Load

Lazy Load ne peut pas être plus facile à utiliser. Il suffit de l’installer, de l’activer et le tour est joué ! Il n’y a pas de paramètre ou de personnalisation à modifier. Ce plugin fonctionne tout seul.

Il utilise jQuery.sonar pour ne charger une image que lorsqu’elle est visible au-dessus du pli. Vous serez peut-être intéressé de savoir que Lazy Load est un amalgame de code créé par l’équipe VIP de WordPress.com chez Automattic, l’équipe TechCrunch 2011 Redesign et Jake Goldman de WordPress consultancy 10up.

Crazy Lazy

 

Voici un autre plugin de lazy loading ultra léger qui fonctionne tout simplement. Aucune configuration compliquée n’est requise.

Selon le thème ou l’utilisation de jQuery, Crazy Lazy utilisera éventuellement une version modifiée du plugin jQuery Unveil.js ou la bibliothèque native JavaScript lazyload.js.

Lazy Load for Videos

 

Tous les plugins de lazy loading ne fonctionnent pas avec la vidéo, ce qui est dommage, car les vidéos peuvent ajouter plus de volume à la taille du fichier de votre page Web que les images.

Lazy Load for Videos peut vous aider à charger paresseusement des vidéos hébergées sur Vimeo ou YouTube. Il charge une image générique et ne charge la vidéo complète et le lecteur vidéo que si un visiteur clique dessus.

Cela est très important si votre site contient de nombreuses vidéos et que vous choisissez un plugin léger qui n’inclut pas de lazy loading pour vidéos.

En savoir plus sur le Lazy Loading

L’utilisation d’un plugin est le moyen le plus simple d’ajouter un lazy loading à votre site, mais ce n’est pas la seule façon. Vous pouvez également utiliser JavaScript sur votre site si vous souhaitez une solution plus simple. Si vous voulez en savoir plus, consultez « Comment différer des images hors écran dans WordPress avec le lazy loading » pour des détails sur le fonctionnement du lazy loading et comment recréer la technique sur votre site.

La façon la plus simple de démarrer avec le lazy loading est d’utiliser Smush gratuit ou Smush Pro. Smush Pro ajoute d’autres fonctionnalités qui peuvent vous aider avec d’autres opportunités Google PageSpeed Insights. Il peut vous aider à servir des images dans des formats nouvelle génération en convertissant vos images en fichiers WebP et en dimensionnant correctement vos images avec le Smush Pro CDN. Smush Pro est même compatible avec le fameux plugin WP Retina 2x, ce qui vous permet de charger paresseusement ces énormes images Retina sans ralentir WordPress.

D’après un article source de WPmudev : https://premium.wpmudev.org/blog/6-lazy-load-plugins-to-make-your-wordpress-site-faster/