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’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/
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 fonctionne.
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 fonction.


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

If you have found a spel­ling error, please, noti­fy us by selec­ting that text and pres­sing Ctrl+Enter.

13 commentaires

      • 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 programmation..

    • Ç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. Bah, ils ont de la chance les spameurs … Moi, mon commen­taire sur l’ar­ticle rela­tif à WP Rocket sur boitea­web n’est pas passé du tout ! :(

  4. 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.

    • Sur ce genre d’extension, il y a souvent des petits problèmes de compa­ti­bi­li­té Javas­cript liés au thème ou aux autres extensions.

Laisser un commentaire

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

Ce site embarque des cookies pour vous offrir la meilleur expérience possible

Spelling error report

The following text will be sent to our editors: