Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos Optimiser le chargement des images avec LazyLoad
Apprenez à mettre en place un système de LazyLoad pour différer le chargement des images et améliorer le temps de chargement de votre site Internet.
Dans ce tutoriel vidéo, nous allons apprendre à créer un système de LazyLoading sur les images à la une, les avatars et les images d’un article. Avant de regarder la vidéo, je vous recommande de lire la suite de cet article afin de comprendre le principe de la technique qui sera mise en place.
L’optimisation du temps de chargement d’un site Internet n’est pas une chose facile. Pour cela, il faut mettre en place plusieurs bonnes pratiques telles que la mise en place d’un système de cache performant, la concaténation et la minification des fichiers HTML-CSS-JS ou encore la réduction du poids des images.
D’ailleurs, le temps d’exécution d’une page dépend aussi du nombre d’images qu’elle contient. En effet, plus ce nombre est important et plus l’affichage de la page sera long. De plus, la consommation de la bande passante sera plus importante.
Pour résoudre le problème, on utilise le LazyLoad (ou “chargement fainéant”). Ce procédé permet de charger les images d’une page en fonction de la navigation d’un internaute.
Pour comprendre le principe de cette technique, il faut se poser la question suivante : Pourquoi devrait-on charger/afficher les images d’une page tant qu’un internaute ne l’a pas visionné ? La réponse est : aucune raison !
Ainsi, le principe fondamental du LazyLoad consiste à afficher les images d’une page uniquement quand elles sont visibles par l’internaute. Cela permet différer le chargement des images non visibles afin d’avoir un premier rendu de la page plus rapidement.
Pour cela, on remplace l’attribut src des images par des pixels transparent de 1×1 pixel. Ensuite, on stocke l’URL de l’image à afficher dans un autre attribut (par ex: data-lazy-src). Enfin, une couche de JavaScript permet de remplacer le pixel transparent par l’image à visionner lorsque l’internaute scroll jusqu’à niveau de l’image.
Par ailleurs, puisque les images ne sont pas chargées par défaut, cela permet de considérablement réduire le nombre de requêtes HTTP. Ainsi, on augmente une fois de plus l’expérience utilisateur de notre site en améliorant les performances de temps de chargement de nos pages.
Aujourd’hui, la mise en place du LazyLoad est devenue indispensable pour les sites à fort trafic. Que ce soit Youtube, Dailymotion ou même encore L’équipe.fr, ils ont tous mis en place ce système sur leur site.
Article écrit par Jonathan B.
Youtube
Twitter
Facebook
78 Commentaires
Allez je vais plus loin, je vais le faire aussi sur les smileys si vous les gérez :
add_filter('smilies_src', 'baw_lazy_smilies' ); function baw_lazy_smilies( $src ){ return "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' data-original='".$src; }Attention il est important de respecter l’ordre
"et'car pour les smilies les propriétés sont encadrées par des simple quote et non des doubles.@Alexandre: Si vous parlez de WP Rocket, alors oui le chargement différer des images fait partie des solutions qu’on apportera par défaut :)
@Julio : Encore un grand merci à toi, je vais mettre à jour les sources en téléchargement avec des suppléments.
Sympa tout ça !
Pour ceux qui veulent, voilà un petit plugin qui fait le travail très proprement :)
http://codecanyon.net/item/auto-lazyloader-wp-plugin/4302013
@Mwea: 11$ quand on peut faire le script soit même ou utiliser un plugin gratuit qui fait exactement pareil, je trouve cela relativement cher :/
@Jonathan Pas faux, l’auteur n’a pas son mot à dire sur le prix qu’ils imposent, c’est ce qui m’embête un peu quand je propose un produit.
Après c’est plus par rapport au fait que y’a aussi un support noscript, un support assuré et que la compatibilité est maintenue sur tous les plans..
A savoir tout de même que sur un achat de 11$ , je n’en reçois que 5.5
@Jonathan Oui je parlais bien de WP Rocket que j’attends avec impatience ;-)
Hé encore un bon tuto dans la lignée de l’optimisation et permformances.
Le lazy load est effectivement obligatoire pour le peut qu’on utilise beaucoup d’images.
Vous pouvez ajouter le filter du lazyload sur
widget_textpour ceux qui utilisent des images dans les widgets en texte libre.@Julio : Ah oui, bien joué pour le coup des images présentes dans le widget texte !
@Mwea: Les commentaires ne sont pas réservés pour la promotion de vos articles ;)
Concernant le plugin payant pour le LazyLoad, je reste sur ma position : 11$ est beaucoup trop cher quand on a des alternatives gratuites qui fonctionnent parfaitement et qui fait même encore mieux le job…
Merci pour cet article, je vais tester ça dès que j’ai le temps sur quelques sites.
Par ailleurs, est-ce que votre système d’optimisation annoncé ira lui aussi dans ce sens (chargement différé des images) ?
@Julio : merci pour cette astuce !
Mon dieu, mais quelle bonne idée ! :)
@Sébastien: Je t’ai fait une bonne promo en plus dans la vidéo =D
Salut Jonathan merci pour le tuto et clin d’oeil à Julio le chipoteur de code ;)
Que ce soit via script ou un plugin gratuit (http://wordpress.org/extend/plugins/lazy-load/) déférer le chargement des images au niveau de la ligne de flottaison est une excellent chose, un gain de temps notamment pour les articles avec bcp d’images!
Pour ma part j’utile le plugin du même nom, très efficace, Reste plus qu’à essayer le CDN gratuit fourni par JetPack…
Ps/ Si tu cherches un beta testeur, m’oublie pas ;) #JDCJDR
j’ai rien qui s’affiche sur mes images exemples ici http://blog.vistaide.com/divers/louverture-de-lantre-du-kralamour-gant
@grosdunord: C’est parce que vous n’avez pas mis les fichiers js dans le bon ordre ! Il faut d’abord mettre le script de LazyLoad et ensuite le fichier qui fait appel au LazyLoad ;)
Merci pour le partage. C’est vrai que c’est important d’optimiser au mieux le chargement des images. Un plugin essentiel pour l’optimisation seo de son site :)
Coucou Jonathan – Julio – Fabrice et les autres.
Je pense que ces dernières semaines, les fichiers proposés par Jonathan vont littéralement changer la donne de WordPress, une énorme évolution, vraiment.
Une fois le plugin sortie, tu vas retirer une épine du pied à pas mal de développeurs ou novices, car il n’y a pas besoin de compétence pour les mettre en route sur son wordpress.
J’ai justement un article plein d’images que j’ai fait hier, je vais donc essayer les yeux fermés (façon de parler) pour voir le changement.
Encore merci Jonathan et Julio pour les petites améliorations.
Ca ne marche pas chez moi. j’ai mis le fichier js puis le script dans le footer (dans le bon ordre). Dès que je mets le code dans le functions.php, il n’y pas plus d’images.
En attendant qu’on trouve une solution j’ai laissé les scripts dans le footer
Oulah, je comprends tout à fait les raisons pour laquelle on remplace du LazyLoading sur n’importe quel site Internet. Mais en tant que référenceur, je déconseille fortement la technique présentée ici pour une simple bonne raison : Google verra un code source dans lequel toutes les images sont des jeux transparents : cela veut dire que le site ne sera plus jamais présent sur Google Image, mais qu’en plus ces images qui étaient présentes dans tout le contenu texte ne vont pas venir renforcer le reste du contenu de la page, diminuant ainsi la pertinence de tous les contenus.
Bref ce menu de la base, mais que je déconseille d’appliquer en tant que tel
@Daniel : Si tu regardes la vidéo, tu verra que le code ajoute aussi une balise noscript contenant la vraie image qui doit être afficher. Et sauf erreur de ma part, Google comprend et sait lire ce qu’il y a dans une balise noscript.
@daniel : donc youtube n’a pas d’images sur google images ?
@Daniel: https://www.google.fr/search?q=Optimiser+le+chargement+des+images+avec+LazyLoad&aq=f&um=1&ie=UTF-8&hl=fr&tbm=isch&source=og&sa=N&tab=wi&ei=u9mAUYaBGuSR7Aaju4DIDg
L’image 2 qui correspond à l’image à la une de l’article “Smush.it : Optimiser le poids des images” est bien indéxé alors qu’elle est présente uniquement dans des balises noscript sur ce site.
Cela confirme que Google prend bien en compte le contenu de la balise noscript :)
J’espère bien car comme Google n’exécute pas les scripts, et donc la peur de Daniel est légitime, il ne saura pas lire les vraies images. Hors si il ne les lit pas, alors il lit le noscript ! Si il ne lit aucun des deux, j’aurais crié au bug :p
C’est ça, donc aucun souci à se faire au niveau du référencement des images :)
@Djib’s: Que je vais sur ton site, je vois que les codes utilisent
jQueryau lieu du$. Donc, il doit certainement avoir un conflit avec jQuery puisque les scripts qu’on utilise sur ce tuto sont déclarés avec le$et pasjQuerydans le code.En cas de problème, merci de me contacter par email pour ne déranger le flux des commentaires ;)
@Julio : Youtube appartient à Google et le moteur de recherche accède directement à la base de données plutôt qu’aux pages.
@Jonathan : avec le noscript, cela doit effectivement passer pour être indexée. Mais j’avoue être un peu sceptique et il faudrait que je fasse des tests pour savoir si une image contenue dans un noscript est aussi efficace qu’une image affichée normalement.
Bonsoir,
Un grand merci pour cette vidéo ! Je suis en train de m’intéresser à toutes les solutions permettant de gagner en rapidité sur nos cher site WordPress, donc ce tutoriel tombe à pic ! Tout juste après le système de cache qui est très intéressant !
Bonjour,
En effet c’est un très bon article (vidéo ;) ).
Par contre, il peut y avoir un souci dans la regex de départ.
Car elle va relever tous les éléments du contenu qui contient une class, un alt et un src.
Si le contenu à un élément qui contient que un de ses éléments, du coup le array_combine va planté ;) Je parle en connaissance de cause.
Du coup, j’ai fais quelque modifs qui vont permettre de ne prendre que les images :
add_filter('get_gravatar', 'lazyload_images'); add_filter('post_thumbnail_html', 'lazyload_images'); add_filter('the_content', 'lazyload_images'); function lazyload_images($content) { if(is_admin() || is_feed()) { return $content; } preg_match_all('#<img.*/>#i', $content, $images); $data = array(); foreach($images[0] as $key => $value) { preg_match_all('#(class|src|alt)=["']([^"']*)["']#i', $value, $matches); $attr = array_combine($matches[1], $matches[2]); @list($width, $height) = getimagesize($attr['src']); $class = $attr['class'] . ' lazy'; $img = '<img class="' . $class . '" data-original="' . $attr['src'] . '" width="' . $width . '" height="' . $height . '" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />'; $img .= '<noscript><img class="' . $class . '" src="' . $attr['src'] . '" width="' . $width . '" height="' . $height . '" /></noscript>'; $data[$value] = $img; } foreach ($data as $k => $v) { $content = preg_replace('#' . $k . '#', $v, $content); } return $content; }Voilà, j’espère que ça servira ^^
@Nicolas: En effet, cela est mieux en parsant uniquement que les images. Merci pour le complément :)
Je voulais justement soulever le fait que si on a plusieurs images dans le $content, la fonction de LazyLoad va remplacer toutes les images par la même (data-original).
Mais avec la solution de @Nicolas c’est règler. Merci à toi :)
Je ne connaissais pas le lazy load, merci ! Et le tutoriel est vraiment bien fait et adapté à tous ;) Je vais aller tester ça sur mon site !
Merci pour ce plugin. Il me sera utile côté SEO. J’espère ne pas avoir des problèmes. Sinon, je vais revenir vous agacer par mes questions.
Bonjour,
Merci pour l’article, peut être pourrez-vous m’aider, je cherche le même type de plugin, mais qui permette de gagner du temps de chargement pour les formulaires intégrés aux articles.
Merci,
Frédy
@Freddy: Euh je ne vois pas le rapport entre une image et un formulaire :/
Il n’y a pas de rapport direct, pour résumer, j’intègre un formulaire en début d’article qui peine à se charger parfois, je me demandais donc s’il existait un plugin qui améliore aussi les temps de chargement de ce côté là.
je pens que je devrais plutôt opter pour les plugins qui améliore la vitesse globale de wordpress.
Merci quand même de ta réponse:)
Frédy
@mima : logiquement pas de soucis car la balise NOSCRIPT est là pour ça (sauf sur les smileys, mais on s’en fiche non ?)
@frédy ; comment et où gagner du temps de chargement de formulaires ? Et qu’apelles tu un chargement de formulaire ? Merci de préciser qu’on puisse bien cerner la demande.
@frédy : Je ne comprends pas comment un formulaire peut mettre du du temps à se charger puisque ce n’est que du markup HTML :/
Bonjour Julio,
Dans mes formulaires il y a du du texte mis en forme et une (légère) image.
Ca doit expliquer les ralentissements qui peuvent arriver je suppose.
Une petite astuce pour encore optimiser ton script :)
http://wpastuces.com/117-lazy-load-responsive-io-duo-gagnant-pour-optimiser-votre-blog/
@wpasctuces : Merci pour le lien, je vais étudié responsive.io de plus prêt.
Ca ressemble au plugin de @raherian http://wordpress.org/plugins/simple-responsive-images/ non ?
merci pour ce plugin il a l’air d’être très utile
ça me servirai bien en ce moment
Excellent tutoriel! Je viens de découvrir votre site internet et j’ai déjà vu pas mal de vos tutoriel, sérieusement: c’est du très bon travail! Je ne fais que trouver mon bonheur parmi vos articles!
Ce système de LazyLoading va m’être très utilise pour mes projets en cours!
Merci beaucoup pour ces explications riches et pertinentes!
Petite question naîve…
WP rocket c’est ce tuto + https://www.geekpress.fr/wordpress/tutoriel/systeme-cache-1851/ ou bien ?
Si on veut bien passer du temps avec les mains dans le cambouis, les deux tutos doivent être plus performants sur le tps de chargements, non ?
Merci pour ce plugin qui a l’air d’être intéressant, je ne connais pas du tout je vais testé immédiatement.
@Vincent: Non, WP Rocket n’a rien à voir avec le tuto de cache. Il s’agit d’un plugin qui va bien plus loin :)
Ce tuto a l’air vraiment sympa, d’autant qu’il n’y a pas besoin dans cette technique d’installer un énième plugin qui viendra finalement alourdir le temps de chargement du blog. Avant de suivre les instructions, j’aimerai toutefois avoir un retour quant aux éventuels impacts sur le référencement des images… Daniel, on compte sur toi ! ^^
Bonjour Ben,
Comme indiqué plus haut dans les commentaires, cela n’a aucun impact sur le référencement des images ;)
Nickel, j’ai suivi pas à pas et ça marche parfaitement et au premier essai ;-)
Merci beaucoup!
Je vais de ce pas faire un tour sur les autres tutoriels!
Merci pour l’astuce! Je suis un adepte de Smushit mais c’est loin d’être suffisant sur un blog avec plein d’image.
Une fois le plugin sortie, tu vas retirer une épine du pied à pas mal de développeurs ou novices, car il n’y a pas besoin de compétence pour les mettre en route sur son wordpress.
J’ai justement un article plein d’images que j’ai fait hier, je vais donc essayer les yeux fermés (façon de parler) pour voir le changement.
Bonsoir Jonathan,
Je veux acheter le fichier source mais je sais plus ou l’ajouter. Une petite aide serait’il possible? Merci
Bonjour
J’arrive un peu “comme une fleur”, mais donc si je comprends bien un plugin est en cours de développement ?
Faut il attendre celui-ci ou un plugin déjà existant (http://wordpress.org/plugins/lazy-load/) fait déjà le même job ?
Merci
NB, si plugin il y aura, on peut espérer qu’il soit compatible avec un WordPress multisites ? :-)
@apetitprix : Je ne comprends pas votre problème :/
@pako69 : Je ne sais pas de quel plugin vous parlez, mais je n’ai jamais mentionné l’envie de faire de ce script un plugin.
Ici, si on parle de plugin, il doit très certainement s’agir de WP Rocket.
Bon… Dans ce cas on va dire que je n’ai rien compris :-(
“Ici, si on parle de plugin”, ok mais de quel plugin dans cas ?
Merci
@pako69: Lisez la fin de la phrase !
Merci pour ce plugin qui a l’air d’être intéressant, je ne connais pas du tout je vais testé immédiatement.
Sinon juste, y a un autre plugin sous wordpress enfin dans la solution jetpack qui s’appelle Proton et qui est aussi très efficace… Toutes vos images sont hébergées ailleurs et du coup forcément c’est plus rapide :)
@Guillaume: Sauf que Photon fait appel à 3 sous-domaines et que les résolutions DNS peuvent faire perdre plus de temps qu’autre chose. Il faut savoir qu’une résolution DNS prend environ 200ms. Donc Photon oblige déjà 600ms de temps de chargement supplémentaire.
Un CDN quand vous êtes hébergés avec un serveur en France avec un lectorat uniquement Français, ça ne sert strictement à rien ;)
Super article et très bonne vidéo, y a plus qu’à ! Mon wordpress attend !
Excellent tutoriel, je ne connaissais pas du tout ce type de système.
De plus, vidéo bien expliquer et on ne s’ennuie pas ;)
Bonne continuation!
Salut;
J’utilise Classipress et ce que je cherche c’est un moyen d’optimiser le poids de mes images avant de les transférer au serveur. Est-ce qu’il y a un moyen de le faire automatiquement, c’est-à-dire au moment de l’ajout de l’image à l’annonce, sans recourir à un autre logiciel de traitement d’images?
Merci.
@Ouali: Il existe le plugin WP Smush.it. Plus d’informations ici : Optimiser le poids des images avec WP Smush-it.
Super plugin, merci beaucoup. Plugin très utile surtout avec une page qui contient beaucoup d’images. Actualement j’utilise image optiizer, mais je vais tester ce plugin. Je pense qu’il est mieux. Surtout si on le combine avec w3 totale cache et cloudflare il devient très puissant. En tout cas merci pour l’information.
Bonjour et merci pour ces scripts !
J’ai tenté d’installer celui-ci sur mon site wordpress sans résultat et je ne comprends pas ce qui doit être placé dans le footer et ce qui est en *.js
Pouvez-vous m’aider s’il vous plaît ? Merci.
Guillaume
(re)Bonjour,
Ce message annule le précédent. Le script fonctionne parfaitement.
Merci !
Guillaume
Bonjour,
Je souhaite afficher en lazyload une carte gmap (via une api) sur mon site (onepage) en bas de page. Dois-je ajouter un filtre à ce script ? Comme ceci ?
add_filter(‘que mettre ici ?’, ‘lazyload_images’);
La solution est-elle bien plus complexe ?
Merci !
Bonjour,
Merci pour l’article. Le temps de chargement des pages est primordiale au niveau du référencement, cet aspect n’est donc pas à négliger.
Cette méthode peut être très utile pour les sites qui contiennent pas mal d’images, cela peut éviter de devoir trop les compresser et perdre en qualité de rendu !
Bonsoir Jonathan,
Je veux acheter le fichier source mais je sais plus ou l’ajouter. Une petite aide serait’il possible? Merci
Mon blog est très lent lors de chargement, sachant que j’utilise le wp super cache mais je pense que les images ne sont pas optimisés.
Merci pour ce TUTO, je vais le tester
@Eleanor: Je ne comprends pas votre question. Vous voulez acheter les fichiers sources ou vous souhaitez les installer ?
Même chose que Sandrine, mon site était très lent, j’ai cherché d’où cela pouvait-il venir, j’ai vu votre tuto, j’ai test et la lenteur venait bien des images.
je viens de découvrir ta solution , ca me serais vraiment utile vue que je partage beaucoup d image dans mes articles
Le thème que j’utilise a été mis à jour il y a peu et incorpore le lazy load. J’ai vu une différence et c’est effectivement pratique.
Chouette article à ce propos.
excellent article .
j’aime beaucoup tous ces informations pour le chargement dynamique image lazyload .
merci pour le partage .
Bonjour,
Existe-t-il un plugin de qualité pour cette fonction ?
J’utilisais BJ Lazy Load, mais il faut toujours “jouer” de la souris, des “aller/retour” pour voir les images; à chaque fois Page Speed Insights me l’indique :
“Votre page doit effectuer des allers-retours supplémentaires sur le réseau afin que la partie au-dessus de la ligne de flottaison s’affiche.”
“Environ 39 % seulement du contenu final au-dessus de la ligne de flottaison a pu être affiché avec l’intégralité de la réponse HTML ”
Puis en 2013 Daniel Roch disait qu’il devait tester le script car il émet un doute au niveau du référencement, je n’ai pas trouvé de message de sa part à la suite du test, pas de résultat ?
Merci
ps: je préfère ce thème à l’ancien thème de GeekPress, bravo
Bonjour,
Le LazyLoad est 100% SEO friendly à partir du moment où vous ajoutez bien la balise noscript. Pour information, Google lui-même utilise le LazyLoad sur Youtube ;)
Bonjour,
J’ai changé de plugin, j’ai le plugin Lazy Load https://fr.wordpress.org/plugins/lazy-load/
et plus de soucis, tous les images au dessus de la ligne de flottaison apparaissent sans avoir besoin de faire un aller/retour comme avec BJ Lazyload
Je sais que Lazyload est 100% SEO friendly et que Google l’utilise, je ne remettez pas en question, l’utilité de l’avoir.
j’indique juste que le plugin https://fr.wordpress.org/plugins/bj-lazy-load/ a un souci
Puis je voulais juste avoir l’avis de Daniel Roch, par rapport à son message, où il me semble, il faisait erreur.