Lazy Load pour retarder l’affichage de vos images

Évitez de charger toutes vos images d’un coup avec l’effet Lazy Load

Si vous placez beau­coup d’images dans vos articles, il faut savoir que le navi­ga­teur de votre visi­teur va toutes les char­ger en arri­vant sur la page de votre site… même celles qui ne sont pas encore visibles si votre article est assez long. L’ef­fet Lazy Load remplace ces images cachées par une image de taille 1 px pour allé­ger la page en atten­dant qu’elles soient réel­le­ment à l’écran.
C’est une opti­mi­sa­tion à ne pas négli­ger sur votre site et je vous propose deux plugins.

Remarque : certains thèmes payants intègrent direc­te­ment cet effet dans leurs fonc­tions. C’est assez facile à visua­li­ser en faisant défi­ler rapi­de­ment les pages – les images s’af­fichent avec un petit temps de retard.

A3 Lazy Load

A3 Lazy Load se veut très complet. Non seule­ment il gère les images mais il prend en compte aussi les vidéos – insé­rées sans short­code par contre – et le conte­nu des iframes. Il gère aussi bien les conte­nus clas­siques que les widgets ou les Grava­tars et fonc­tionne pour les pages AMP. Vous pouvez même défi­nir une classe CSS pour les images que vous ne dési­rez pas voir impac­tée par l’ef­fet.

Options

a3-lazy-load-optionsB1

a3-lazy-load-optionsA


site de l’extension sur Word​Press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​a​3​-​l​a​z​y​-​l​o​ad/
version testée : 1.7.1

Rocket Lazy Load

Par les créa­teurs du fameux plugin de cache Rocket Cache, Rocket Lazy Load ne propose aucun réglage. Vous acti­vez et ça fonc­tionne.
On me prévient qu’il y a quand même possi­bi­li­té d’ex­clure des pages de l’ef­fet via une fonc­tion.


site de l’extension sur Word​Press​.org : https://​word​press​.org/​p​l​u​g​i​n​s​/​r​o​c​k​e​t​-​l​a​z​y​-​l​o​ad/
version testée : 1.0.4

Si vous avez trou­vé une faute d’orthographe, infor­mez-nous en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée.

13 réponses sur “ Lazy Load pour retarder l’affichage de vos images ”
      1. Oui, “vous l’ins­tal­lez et ça fonc­tionne” –> pour l’ef­fet Lazy Load partout.
        Mais on peut “affi­ner” avec un p’tit bout de code (voir la Faq du plugin) …
        Bon, pour un débu­tant qui ne veut pas toucher au code, c’est sans doute plus simple de modi­fier juste la class CSS de(s) l’image(s) sur laquelle on veut désac­ti­ver l’ef­fet, avec l’autre plugin que tu indiques.

  1. Bonjour,
    j’ai gros­so modo 10 à 15 photos hors premier écran d’ar­ri­vée et je me demande si c’est vrai­ment percu­tant pour si peu de requête… j’hé­site beau­coup à rajou­ter une couche de program­ma­tion..

    1. Ça fait quand même une écono­mie de 1 Mo quasi­ment. C’est à tester – et suivant la nature de votre site. Mon site prin­ci­pal est consa­cré à l’image alors la plupart des billets profitent de cet effet.

  2. Rocket Lazy Load présente une incom­pa­ti­bi­li­té avec l’ex­ten­sion Basic Google maps Place­ma­kers. Malgré mes demandes au support des 2 exten­sions, je n’ai pas de réponse. (pas cool de la part de Julio Potier, j’ima­gine que si j’avais la version payante de WP Rocket, j’au­rais une réponse rapide)
    J’ai testé Speed Up Lazy load, qui semble moins perfor­mante pour le gain de rapi­di­té … mais qui ne laisse pas mes cartes en rade … et dont on peut aussi désac­ti­ver l’ef­fet en cas de besoin.

  3. Bonjour,
    Petit bug par moment pour a3 Lazy Load sur certains sites, certaines personnes ne voient pas les images, d’autres si, ce qui étrange, pour­tant à chaque fois, dès que le plugin a été suppri­mé tout est rede­ve­nu normal.
    Il y a le plugin BJ Lazy Load qui a l’air pas mal . J’ai­mais bien Lazy Load de Moham­mad Jang­da, mais plsu de mises à jour depuis un an.

Laisser un commentaire

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

Notifiez-moi les commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.

Aucun support n’est fourni pour les extensions testées. Vous pouvez utiliser Markdown pour les commentaires.