(7 vote(s), 
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).
21 commentaires
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 ...
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.
ouah merci cela fait 1 mois que je chercher cette solution mais rien à faire j'ai rien trouver ! trop cool mec
pas mal,c'est bon à savoir si mon site rencontre pas de traffic;)
chapeau pour le tuyaux
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 ...
@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 ?
@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.
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 😉
Merci pour la technique
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.
Adopté il y a peu de temps et j'en suis ravi 😉
Vous avez pas eu des problèmes avec les images dans votre sidebar qui ne sont pas affichées au scrolling ?
Sisi, faut aller jusqu'au bout de la page pour que la sidebar (plutôt ses images) se chargent :S
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({
Merci joe-, une petite adaptation (site html5 -> #article à la place de #post-content perso) et c'est parfait !
@Mealin, @Joe : avec jQuery il y a toujours une solution 🙂
Super astuce! Je viens de le mettre en place sur mon blog, merci pour cet article 🙂
Il ne fonctionne pas du tout sur le mien. Faut-il installer Jquery au préalable ? Comment fait-on ?
Merci
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 ...
merci!