Many of you probably like to use lots of images on your blogs, in fact i see many personal blogs that use up to ten images with just a few snippets of text.This looks great and of course a picture is worth a thousand words.But images really slow down the loading time of pages on your blog.In fact for visitors to your blog with slow connections or dial up connections more than two large images in a post coupled with the normal gadgets and graphics could take a few minutes to load.When online not many people are willing to wait for content they want instant results (Off topic – I thought Google’s release of ‘Google Instant’ was interesting, they promise instant search results.Did someone think 2,070,000,000 results in 0.13 seconds was too slow ?).
For many bloggers their posts revolve around the pictures and other graphics used, they are not willing to sacrifice images for faster page load times.In this post i may have the perfect solution, The jQuery Lazy Load Plugin.
Lazy Load Plugin
The Lazy Load Plugin or similar Plugins are used on many of the most popular blogs and websites.The concept is quiet simple, when someone lands on your blog the images they cant see wont load until the reader reaches them, only the images that are visible at the very top (called ‘above the fold’) will load.As the reader scrolls down the page the images load just before they get to them.With the Lazy Load in place each page will load much quicker without the burden of lots of large images but these images will be loaded and ready to view when the reader gets to them.Adding the lazy Load Plugin to your blog can be done in a few steps.
Installing The Lazy Load Plugin
Step 1. In your dashboard click ‘Layout/Design’ > ‘Edit Html’
Step 2. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code – More Info)
</head>
Step 3. Copy and paste the following code Directly Before / Above </head>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://pwam.googlecode.com/files/jquery.lazyload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "http://pwam.googlecode.com/files/grey.gif",threshold : 200});
});
</script>
Once the code is in place save your template.
| Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post or Click here for other Rss Options. If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank ! |
The lazy Load Plugin is now in place and you should see an instant change in the load time of your blog, especially pages with multiple images.
Let us know if you have added Lazy Load to your blog and what the effect has been..
