(5 vote(s), moy. : 
Loading ...Si vous hébergez vos images sur votre serveur et que celles-ci sont nombreuses, votre serveur peut fortement ralentir la cadence d'envoi de ces images à cause de la bande passante nécessaire. Si votre blog/site rencontre une forte affluence, les visiteurs auront tendances à partir en courant si vos images, et donc vos pages sont trop longues à charger (des études l'ont prouvé).
Une page comportant un nombre important d'image est longue à charger et c'est d'autant plus vraie sur les configurations légères (ultra-portable et mobiles). La raison est simple : toutes les images sont chargées d'un coup d'un seul.
La solution : le lazy load
Lazy signifie paresseux (ça y est vous comprenez l'image d'illustration:) ).
Le principe est simple et efficace : les images sont chargées au scroll, c'est à dire que toutes les images que vous ne voyez pas ne sont pas chargées. Cela soulage à la fois votre serveur mais également le pauvre navigateur des visiteurs.
Si vous avez du mal à comprendre, voyez par vous même cet exemple chez Designrfix en descendant rapidement en milieu de page.
LazyLoad est un plugin jQuery capable de réaliser ce retardement de chargement. Vous pouvez l'intégrer très facilement dans un n'importe quel site, voir la documentation à ce sujet.
Si vous utilisez WordPress, il existe l'équivalent en plugin : jQuery Image Lazy Load WP crée par AYN. Il vous suffit de l'activer pour qu'il s'occupe de retarder le chargement de vos images.
Conclusion
Cette astuce permet de réduire drastiquement la bande passante consommée dans le cas où de nombreuses images sont présentes dans vos billets, qui plus est si votre taux de rebond est important (les images ne seront pas chargées pour rien).
Rien ne vous empêche cependant d'utilisation en parallèle un frontal de cache tel que nginx, lighttpd ou varnish qui soulagera votre serveur Apache et l'interpréteur PHP (je vous en reparlerai).
Déjà 20 commentaires
dit :
17 avril 2010 à 20h04
Salut,
Merci pour l’astuce, j’avais déjà vu ceci sur plusieurs sites mais je ne savais pas ce que c’était, maintenant c’est chose faite
Je viens de l’appliquer sur un de mes deux sites et le plugin tourne correctement avec les effets voulus : chargement des images lors d’un scroll !
En espérant gagner un peu de vitesse de chargement par la même occasion …
dit :
19 avril 2010 à 16h23
Belle technique, en effet.
Par contre, le site que tu donnes en exemple rame à bloc chez moi ; et je pense pas que ça soit dû à ma bande passante. Je n’ai pas eu le courage d’analyser le source du code jquery, mais est-il si optimisé que ça ? Ca pourrait être intéressant de comparer la charge système « coté client » avec ou sans ce plugin, pour comparer.
dit :
19 avril 2010 à 17h57
ouah merci cela fait 1 mois que je chercher cette solution mais rien à faire j’ai rien trouver ! trop cool mec
19 avril 2010 à 19h13
pas mal,c’est bon à savoir si mon site rencontre pas de traffic;)
chapeau pour le tuyaux
dit :
19 avril 2010 à 21h29
Voilà qui devrait ravir mon hébergeur ! Par contre vu que c’est du javascript, est-ce que c’est quand même SEO-friendly au niveau des display:none et tout ça ? Les bots ne chargeant pas ces scripts je suppose que le poids des pages reste le même pour eux …
19 avril 2010 à 22h06
@Simon : à moins que tu veuilles expressément que tes images soient indexées, il n’y aura pas d’impact sur l’aspect textuel. Mais il me semble que Google est plus ou moins capable d’interpréter le JS, non ?
19 avril 2010 à 22h07
@Julien Guyomard : le site rame pas mal effectivement, mais on se rend d’autant mieux compte de l’effet pour le coup
Je n’ai pas poussé l’analyse jusqu’au code du plugin, mais ce serait intéressant.
22 avril 2010 à 10h39
j’ai enfin trouvé ce que je cherchais, depuis le temps que je vois cela sur d’autres blogs, merci blogmotion pour cette info, je vais enfin pouvoir appliquer ça sur mon blog
27 avril 2010 à 16h50
Merci pour la technique
2 mai 2010 à 19h11
Bonjour,
Merci pour ce post, cette technique me semble intéressante sur certains projets que j’ai fait par le passé cela m’aurait bien aidé, je bookmark car cela devrait me servir rapidement.
21 juillet 2010 à 14h18
Adopté il y a peu de temps et j’en suis ravi
dit :
27 juillet 2010 à 14h57
Vous avez pas eu des problèmes avec les images dans votre sidebar qui ne sont pas affichées au scrolling ?
dit :
27 juillet 2010 à 16h21
Sisi, faut aller jusqu’au bout de la page pour que la sidebar (plutôt ses images) se chargent :S
dit :
27 juillet 2010 à 16h30
Merci. En fait j’avais trouvé, en configurant le script uniquement pour le contenu de l’article avec cette spécification dans la fonction :
jQuery(« #post-content img »).lazyload({
27 juillet 2010 à 19h00
Merci joe-, une petite adaptation (site html5 -> #article à la place de #post-content perso) et c’est parfait !
27 juillet 2010 à 21h25
@Mealin, @Joe : avec jQuery il y a toujours une solution
1 septembre 2010 à 2h09
[...] Charger des images à la volée (on scrolling). (Via @allformusic) [...]
dit :
4 novembre 2010 à 13h49
Super astuce! Je viens de le mettre en place sur mon blog, merci pour cet article
dit :
10 décembre 2010 à 10h17
Il ne fonctionne pas du tout sur le mien. Faut-il installer Jquery au préalable ? Comment fait-on ?
Merci
7 janvier 2011 à 14h10
Bonjour,
En effet il est primordial que les pages s’affichent rapidement, je ne connaissais pas cette astuce.
J’ai dééjà remarquer que parfois ce n’est pas un problème de bande passante mais le navigateur qui peine à charger les images. c’est d’ailleurs assez impressionnant sur certaines configuration un peu ancienne ou avec certain navigateur …