12
comments
Reduce Page Loading Time in Blogger Adding JQuery Lazy Load Plugin

If your blog is contain too much images and Page Loading time of your blog is too high, then Adding jQuery Lazy Load Plug-in in you blog can help to Reduce Page Loading Time in Blogger.

Reduce Page Load Time in Blogger

Images below the fold (the ones lower than window bottom) are not loaded with help of the Lazy Load Plug-in, Means when scrolling down they are loaded only when they needed.

Jquery Lazy Load Plugin

This post will explain to you how you can add JQuery Lazy Load Code in your blogger blog or any other website. It can reduce the page loading time of your site. You can see more details about this JQuery Lazy Load Plugin from here: http://www.appelsiini.net/projects/lazyload.

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

Steps To Add Lazy Load jQuery Plugin in Blogger:

#Step 1. Log in to your blogger dashboard--> layout- -> Edit HTML.
Layout Edit HTML

#Step 2. Scroll down to where you see </head> tag .

#Step 3. Copy below code and paste it just before the </head> tag .

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/addinblogger/how-to-add-in-blogger/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://sites.google.com/site/addinblogger/how-to-add-in-blogger/grey.gif&quot;,threshold : 200});
});
</script>


Updates: Change the Code because of previous forbidden issues.


12 Responses to "Reduce Page Loading Time in Blogger Adding JQuery Lazy Load Plugin" - Leave a response

  1. gameboy July 1, 2010 at 11:25 AM
    hi,
    Nice post.I will try on my blog.As my blog is full of images(games and movies).It takes time to load.I will test it and also recommend this post to others.
    www.hacknol.blogspot.com
  2. Piyush - Admin @ Blogger How To Tips July 1, 2010 at 8:45 PM
    @Gameboy, i have visited your blog and you are right about load time of your blog, it is taking too much time. i think images are not the concern for you. You are using adbrite in your blog - it is taking too much time to load. I suggest you to try Infolinks.com.
  3. Anonymous December 9, 2010 at 4:32 PM
    hello...just wanna ask...is it really works?

    coz i just tried...but then when i test my page speed..its the same....just copy the javascript then paste it rite? am i missing something here?
  4. Prasanta December 9, 2010 at 4:48 PM
    Hi Piyush,

    Please see my site www.thenokiagallery.com and let me know if it takes too long time. I have added the (You have provided) in the template. I will be waiting for your reply.

    With Regards
    Prasanta Borah
  5. Piyush - Admin @ Blogger How To Tips December 10, 2010 at 7:14 AM
    @Prasanta, Your blog is not taking too much time to load which is a very good thing :) and i just want to suggest you that you should change your Logo, the current logo is not looks good.
  6. Piyush - Admin @ Blogger How To Tips December 10, 2010 at 7:30 AM
    I have changed the code, please modify your templates according to that.
  7. Piyush - Admin @ Blogger How To Tips February 1, 2011 at 8:18 AM
    just replace whole section given at step 3 :)
  8. Captured Photography February 15, 2011 at 4:24 AM
    Hi,

    My questions is referring to Wordpress and pages.

    I wan to only use Lazy Loader on my Blog page but not on the rest since it misses with how the images load.

    Is there a means to only define using this plugin on a certain page?

    Thanks
  9. Piyush - Admin @ Blogger How To Tips February 16, 2011 at 10:53 PM
    You can restrict JavaScript from loading on certain pages, but you are talking about wordpress right ?
  10. andry yudha May 28, 2011 at 12:18 AM
    very interesting ,, i wanna implant on my blog,,
    good info.

Post a Comment

^ Scroll to Top