Its a difficult work for Bloggers such as photography bloggers who use large image resolutions in their blog. As a result Blogger Blog becomes slow when they use large image files. Its good to optimize them before posting but, the photos may loose a lot of quality needed by the blogger. To the rescue of the big image integration blogger website i have a script used to make images load lazy to increase page speed. Speedup A Blogger Blog Using Image Lazy Load Script, its easy because we are going Step By Step in adding the Blogger Blog Image Lazy Load Script in your blogger website.


Speeds make the larger role in website performance and traffic results by reducing bounce rate of visitors. If a website loads fast, it becomes easy for the user to follow up the links in the post. The lazy load script is here for your better performance.

Speedup A Blogger Blog Using Image Lazy Load ScriptHow the Image Lazy Load Script Improve Blogger SEO Performance.

Faster loading websites impress Search Engines. So before we waste more time explaining how good it is to optimize your blogger blog images by using blogger lazy load script. Let me break down how it works. It reduces the flow of page load by making images appear but load slowly as the entire blogger page loads with content. I imagine how fast your blogger blog post images will load when you have compressed them and used the lazy load script in your template. Super fast. After that make sure that you test your blogger blog speed and thank me latter.

How To Speedup Blogger Blog Using Image Lazy Load Script.

Follow The Guide Below :-
Step 1 :  Open Blogger.com 
              Login to your blogger Dashboard.
Step 2 :  Choose The Blogger Blog You want to add Image lazy load script to.
Step 3 :  Navigate to the Template option
Click on the template option on the left side of the blogger dashboard to take you to the template editing part.
Step 4 : Click on the Edit HTML option next to customize option.
Step 5 : Click on Ctrl + F to display search panel on the right upper column of the code block.
Step 6 : Click on the dialogoe box and search for the </head> .
Step 7 : Press enter and click on the upper part of the </head> tag just before it.
Step 8 : Now place the blogger Blog Image Lazy Load Script Code.


[ <!– starting the Lazy Load Script –>
<script type=”text/javascript”>// < ![CDATA[ (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:”scroll”,effect:”show”,container:window};if(b){a.extend(c,b)}var d=this;if(“scroll”==c.event){a(c.container).bind(“scroll”,function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&#038;&!a.rightoffold(this,c)){a(this).trigger(“appear”)}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr(“original”)){a(b).attr(“original”,a(b).attr(“src”))}if(“scroll”!=c.event||undefined==a(b).attr(“src”)||c.placeholder==a(b).attr(“src”)||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr(“src”,c.placeholder)}else{a(b).removeAttr(“src”)}b.loaded=false}else{b.loaded=true}a(b).one(“appear”,function(){if(!this.loaded){a(“<img />”).bind(“load”,function(){a(b).hide().attr(“src”,a(b).attr(“original”))[c.effect](c.effectspeed);b.loaded=true}).attr(“src”,a(b).attr(“original”))}});if(“scroll”!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger(“appear”)}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d< =a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[“:”],{“below-the-fold”:”$.belowthefold(a, {threshold : 0, container: window})”,”above-the-fold”:”!$.belowthefold(a, {threshold : 0, container: window})”,”right-of-fold”:”$.rightoffold(a, {threshold : 0, container: window})”,”left-of-fold”:”!$.rightoffold(a, {threshold : 0, container: window})”})})(jQuery);$(function(){$(“img”).lazyload({placeholder:”http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif”,effect:”fadeIn”,threshold:”-50″})})
// ]]></script>
<!– End of Lazy Load Script –>
]

NOTE : Above Script is Only to Increase your Blogger Image Loading Speed person Who Disable JavaScript on their Browsers Can’t Able to See Pictures in Your Blog Post. So This can Solve your Confusion related to This Script. But that's so rare.

Conclusion Of  Blogger Image Lazy Load Script Post.
Lazy Load Plugin is a J query function that simply delays the loading of your blog images. Using Lazy Load will make your texts and important sections show before the images are loaded.
Lazy Load also loads your images on scroll with animations i.e as you scroll down your blog, all your images are loaded one by one thereby speeding up your BlogSpot blog. 


Thank You for being Part of this good article.I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. Incase you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.

1 Comments

Post a Comment

Previous Post Next Post