How To Reduce PageLoading Time in Blogger By Adding JQuery Lazy Load Plugin

[DE_Light]

How To Reduce PageLoading Time in Blogger By Adding JQuery Lazy Load Plugin

This post will explain to you howto add JQuery Lazy Load Plugin toyour blogger blog or any other website easily.
If you have a blogor website containing many images, this tricks will be very helpful to you. It can reduce the page loading time of your site. You can see more details about this JQuery Lazy Load Plugin.

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.

How To Reduce Page Loading Time in Blogger By Adding JQuery Lazy Load Plugin?

STEPS TO FOLLOW BELOW

1. Go to your Blogger Dashboard > Template > Edit HTML .

2. Search (Ctrl  F) for </head> Tag.

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

<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/><script charset='utf-8' type='text/javascript'>$(function() {$(&quot;img&quot;).lazyload({placeholder :&quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});});</script>

Note : You can download java script files from here if you want to host above files yourself.
4. Now save your template and you are done.Refresh your site to see the result.

Source: Click here!

 

[gurusmaker]

this is interesting specially high image bloggers are for sure gonna enjoy this

 

[dspacedude]

You can also reduce your blog page speed by compressing your css codes...

 

[DE_Light]

this is interesting specially high image bloggers are for sure gonna enjoy this

thanks for droping ur comments...

 

[DE_Light]

You can also reduce your blog page speed by compressing your css codes...

quite right, but dats a long job, for high class bloggers that blog about big images on their blog. The jquerry codes does it with easy for them. Thanks for dat method too.

 

[cisprakash]

Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?

 

[zeal]

Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?

have you resolved it?

 

[DE_Light]

Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?

Just explain were you are confused? So i can let you in. And remember, before you can do it, you must have a little knowledge of HTML Editting before you can do it. You can use the above link to learn it and also learn about tags, etc.

 

[cisprakash]

Yahh This is really great concept here, i have gone through the code where you have use JavaScript as well as JQuery but i am little bit confused with "lazyload", Is it predefined method ?

Just explain were you are confused? So i can let you in. And remember, before you can do it, you must have a little knowledge of HTML Editting before you can do it. You can use the above link to learn it and also learn about tags, etc.

Well i am having a knowledge of HTML, CSS, Java Script, JQuery but i am little bit confused with "lazyload", Is it predefined method ?

 

[ebenzunlimited]

Compressing your css code helps a lot to reduce load time. use http://www.csscompressor.com/ to compress your css code.

for blogger (.blogspot) just copy the codes between

    <b:skin><![CDATA[/*

 ]]></b:skin>

and replace them with the cpmpressed code.

 

[cisprakash]

Great this really works well, thanks for it.

 

[DE_Light]

I think that could help u too.