Save Loads Of Bandwidth By Using Lazy Load
December 10th, 2009 7 comments
Every website or blog owner should always try to find new ways of making their site faster and consume less server resources. This is especially important if you’re generating high traffic. Would you want to look at a site that’s loading for several seconds with every click you make? Here’s one simple solution.
This tip is extremely helpful if your articles have several images in them. Picture it this way – every time you open up an article consisting of several high-quality images (especially if you’re posting many “list posts”) all the images would have to be fetched from the server. This increases load times and also your bandwidth, what most hosting providers usually limit.
So what’s the solution?
The answer is – Lazy Load. It’s actually a jQuery plugin what delays loading all those images. By using it your images will only be loaded once in or near the viewport (visible part of the website). So when you have a long post and some of your pictures are in the end they will be loaded when you’ve scrolled down that far. Lazy Load has a specific setting for the threshold meaning how far the image should be to the threshold once it needs to be loaded. With fine tuning it most of your readers won’t even notice the difference. You can even use a nice fade in effect if you’re into that.
My experience
After using it for a long time now I can really say it’s worth it. It actually saves you a lot of bandwidth – that’s why I finally decided to set it up on this blog about a week ago. Already I can see the difference comparing my before and after bandwidth charts. And setting it up was incredibly easy.
Thanks for this truly useful information… Nice tip.
Your blog design is kool… very nicely done…
-Deepu
Glad you liked the tip and my blogs design!
When hearing comments like these it really shows me that I’m headed in the right direction…
Your blog keeps getting better and better! Your older articles are not as good as newer ones you have a lot more creativity and originality now keep it up!
Hey Indrek,
Did you use lazy load wordpress plugin? I checked the link you provided but I have no idea where to put
$(“img”).lazyload({
placeholder : “img/grey.gif”,
effect : “fadeIn”
});
I’ll be really grateful if you can show a tutorial maybe on how to do this since I couldn’t find any online resources in integrating it in wordpress without using a plugin…
Regards,
Marion
Hi Marion,
It was pretty foolish of me to not specify how the integrating goes. But that’s a good idea for a follow-up.
Here’s how I set it up.
1. Download the script from the website (http://www.appelsiini.net/projects/lazyload)
2. Make a new folder named js in the root folder of your website/blog (root folder is where you have your wp-config.php file)
3. Upload the Lazy Load file to the js folder
4. In the same js folder create a new file named functions.js and paste this code in the file:
$(function() {
$(‘#content img’).lazyload({
placeholder: “/gfx/grey.gif”,
effect: “fadeIn”
});
});
5. Browse to your active theme folder and open the file header.php. Before the tag paste these two lines of code:
And you’re done. All you may have to do is change the #content to suit your theme. This is the wrappers name where your blog posts appear.
I believe this little description should help you. If not, let me know!
PS! You also have to have the jQuery library active to use Lazy Load!
Thanks Indrek for the quick reply…
For the two lines of code, were you referring to the lazyload.js and functions.js?
this is what i’ve pasted since my theme already have a js folder:
<script type="text/javascript" src="/js/jquery.lazyload.js”>
<script type="text/javascript" src="/js/functions.js”>
as for the js library, my theme uses this:
for the grey.gif, i created gfx folder within my theme and place it in there…
am i doing this right? i have gallery style homepage so i’m not quite sure i have to configure something else….i still see the bottom photos getting loaded before i even scrolled down…
thanks again and sorry for the troubles
oops the js library didn’t show up in my recent comment…
ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js