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 pla­cez 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’effet Lazy Load rem­place 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 pro­pose deux plu­gins.

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

A3 Lazy Load

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

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/
ver­sion tes­tée : 1.7.1

Rocket Lazy Load

Par les créa­teurs du fameux plu­gin de cache Rocket Cache, Rocket Lazy Load ne pro­pose aucun réglage. Vous acti­vez et ça fonc­tionne.
On me pré­vient qu’il y a quand même pos­si­bi­li­té d’exclure des pages de l’effet 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/
ver­sion tes­tée : 1.0.4

Par­ta­gez
13 réponses sur “ Lazy Load pour retarder l’affichage de vos images ”
      1. Oui, “vous l’installez et ça fonc­tionne” –> pour l’effet Lazy Load par­tout.
        Mais on peut “affi­ner” avec un p’tit bout de code (voir la Faq du plu­gin) …
        Bon, pour un débu­tant qui ne veut pas tou­cher 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’effet, avec l’autre plu­gin que tu indiques.

  1. Bon­jour,
    j’ai gros­so modo 10 à 15 pho­tos hors pre­mier écran d’arrivée et je me demande si c’est vrai­ment per­cu­tant pour si peu de requête… j’hésite beau­coup à rajou­ter une couche de pro­gram­ma­tion..

    1. Ça fait quand même une éco­no­mie de 1 Mo qua­si­ment. C’est à tes­ter – et sui­vant la nature de votre site. Mon site prin­ci­pal est consa­cré à l’image alors la plu­part des billets pro­fitent de cet effet.

  2. Rocket Lazy Load pré­sente une incom­pa­ti­bi­li­té avec l’extension Basic Google maps Pla­ce­ma­kers. Mal­gré mes demandes au sup­port des 2 exten­sions, je n’ai pas de réponse. (pas cool de la part de Julio Potier, j’imagine que si j’avais la ver­sion payante de WP Rocket, j’aurais une réponse rapide)
    J’ai tes­té Speed Up Lazy load, qui semble moins per­for­mante pour le gain de rapi­di­té … mais qui ne laisse pas mes cartes en rade … et dont on peut aus­si désac­ti­ver l’effet en cas de besoin.

  3. Bon­jour,
    Petit bug par moment pour a3 Lazy Load sur cer­tains sites, cer­taines per­sonnes ne voient pas les images, d’autres si, ce qui étrange, pour­tant à chaque fois, dès que le plu­gin a été sup­pri­mé tout est rede­ve­nu nor­mal.
    Il y a le plu­gin BJ Lazy Load qui a l’air pas mal . J’aimais bien Lazy Load de Moham­mad Jang­da, mais plsu de mises à jour depuis un an.

    1. Sur ce genre d’extension, il y a sou­vent des petits pro­blèmes de com­pa­ti­bi­li­té Javas­cript liés au thème ou aux autres exten­sions.

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.