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 beaucoup d’images dans vos articles, il faut savoir que le navigateur de votre visiteur va toutes les charger en arrivant 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 remplace ces images cachées par une image de taille 1 px pour alléger la page en attendant qu’elles soient réellement à l’écran.
C’est une optimisation à ne pas négliger sur votre site et je vous propose deux plugins.

Remarque: certains thèmes payants intègrent directement cet effet dans leurs fonctions. C’est assez facile à visualiser en faisant défiler rapidement les pages – les images s’affichent avec un petit temps de retard.

A3 Lazy Load

A3 Lazy Load se veut très complet. Non seulement il gère les images mais il prend en compte aussi les vidéos – insérées sans shortcode par contre – et le contenu des iframes. Il gère aussi bien les contenus classiques que les widgets ou les Gravatars et fonctionne pour les pages AMP. Vous pouvez même définir une classe CSS pour les images que vous ne désirez pas voir impactée par l’effet.

Options

a3-lazy-load-optionsB1

a3-lazy-load-optionsA


site de l’extension sur WordPress.org: https://wordpress.org/plugins/a3-lazy-load/
version testée: 1.7.1

Rocket Lazy Load

Par les créateurs du fameux plugin de cache Rocket Cache, Rocket Lazy Load ne propose aucun réglage. Vous activez et ça fonctionne.
On me prévient qu’il y a quand même possibilité d’exclure des pages de l’effet via une fonction.


site de l’extension sur WordPress.org: https://wordpress.org/plugins/rocket-lazy-load/
version testée: 1.0.4

Partagez

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît,.

11 réponses sur “ Lazy Load pour retarder l’affichage de vos images ”
      1. Oui, “vous l’installez et ça fonctionne” –> pour l’effet Lazy Load partout.
        Mais on peut “affiner” avec un p’tit bout de code (voir la Faq du plugin) …
        Bon, pour un débutant qui ne veut pas toucher au code, c’est sans doute plus simple de modifier juste la class CSS de(s) l’image(s) sur laquelle on veut désactiver l’effet, avec l’autre plugin que tu indiques.

  1. Bonjour,
    j’ai grosso modo 10 à 15 photos hors premier écran d’arrivée et je me demande si c’est vraiment percutant pour si peu de requête… j’hésite beaucoup à rajouter une couche de programmation..

    1. Ça fait quand même une économie de 1 Mo quasiment. C’est à tester – et suivant la nature de votre site. Mon site principal est consacré à l’image alors la plupart des billets profitent de cet effet.

  2. Rocket Lazy Load présente une incompatibilité avec l’extension Basic Google maps Placemakers. Malgré mes demandes au support des 2 extensions, je n’ai pas de réponse. (pas cool de la part de Julio Potier, j’imagine que si j’avais la version payante de WP Rocket, j’aurais une réponse rapide)
    J’ai testé Speed Up Lazy load, qui semble moins performante pour le gain de rapidité … mais qui ne laisse pas mes cartes en rade … et dont on peut aussi désactiver l’effet en cas de besoin.

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.