Comme le rappelle l’article Des pages web de plus de 2 mo, à qui la faute ? les images représentent en moyenne 56 des requêtes et 62% du poids total d’une page web. Et ces chiffres sont en augmentation constante. Pour améliorer les performances de votre site, outre un système de cache et d’optimisation des fichiers HTML, CSS et Javascript, il est important de penser à différer l’affichage des images jusqu’à ce qu’elles sautent aux yeux de l’utilisateur.
Lazy load ?
Cette technique, appelée Lazy load (pour chargement paresseux) fonctionne grosso modo de la manière suivante :
- Remplace l’attribut
srcde l’image par un pixel transparent, - Stocke l’URL de l’image dans un attribut
data-truc, - Remplace le pixel transparent via JavaScript par l’adresse de l’image à afficher lorsque l’utilisateur fait défiler la page jusqu’à l’image en détectant l’événement scroll.
Pour quoi ?
Pour ne pas priver WordPress d’une joie et mes visiteurs d’un affichage rapide, j’ai choisi d’installer a3 Lazy Load. L’extension prend en compte les éléments suivants :
- Images contenus dans les articles, les pages, les zones de Widgets (sidebar, header et footer), ainsi qu’aux miniatures et aux gravatars.
- Vidéos Youtube, Vimeo, HTML5, etc. (consulter la liste des contenus embarqués),
- Contenus présents dans une balise
iframe(médias embarqués dans WordPress, Boutons Facebook, Profils Google+, cartes Google Maps, etc.)
Et puis quoi encore ?
a3 Lazy load est compatible avec les extensions WooCommerce, WP Super Cache et W3 Total Cache, ainsi qu’avec une architecture CDN ou encore avec des thèmes mobiles comme WPTouch ou MobilePress.
Parmi les autres points intéressants, j’ai noté les possibilités suivantes :
- Exclusion d’images ou vidéos en précisant les classes CSS concernées.
- Choix entre l’affichage d’un Preloader ou d’un effet de Fading le temps que l’image s’affiche.
- Choix entre inclure le script dans le head ou dans le footer.
- Utilisation de
noscriptsi Javascript est aux abonnés absents. - Compatible avec le framework jQueryMobile
- Et plein d’autres choses encore…
→ Téléchargez a3 Lazy Load