Accélérer WordPress #8 – Lazy load pour les images

lazy

Alors là, je crois avoir découvert un truc formidable.

Au lieu de charger toutes les photos de la page, le « lazy load » les charge au fur et à mesure que l’on descend (scroll) dans la page. C’est donc une amélioration significative :

  • Moins de requêtes, de kB et de temps pour que le chargement soit déclaré complet
  • Et possiblement un meilleur ranking chez notre Ami

J’ai utilisé le plugin « jQuery lazy load plugin » dont une documentation sommaire et une démo sont disponible ici.

Ca marche « out of the box » pour les images simples :

  • Créer une image vide de 1px x 1px : grey.gif
  • Dans l’éditeur de Post utiliser la syntaxe indiquée
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

J’ai eu plus de mal à le faire fonctionner pour les images associées à un lien, dont la syntaxe est

<a href="lien_quelconque"><img src"url_image" /></a>

N’hésitez pas à me contacter pour connaître le détail du code.

J’en profite pour vous faire part des nouvelles performances du site www.coach-abondance.com :

Performance www.coach-abondance.com

En résumé

  • Le site commence à apparaître après 0,74 secondes : l’internaute n’a plus le temps de bâiller … [au début, c’était plus de 10 secondes],
  • Le temps total de chargement est de 3,3 secondes [au début, c’était plus de 14 secondes],/li>
  • 13 requêtes sont nécessaires [au lieu de 53] et 483 kB sont chargés [au lieu de 960],
  • Seules les 5 premières images (dont le background) sont chargées « en première instance » [sur la quinzaine présentes sur la page], les autres sont … lazy 🙂 et arrivent quand on scrolle la page

 

Share

Une réflexion au sujet de « Accélérer WordPress #8 – Lazy load pour les images »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *