Speedup Image Load Lazy Load Script

It’s difficult to work for Bloggers such as photography bloggers who use large image resolutions in their blogs. As a result Blogger Blog becomes slow when they use large image files. It’s good to optimize them before posting but, the photos may lose 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, it’s easy because we are going Step By Step in adding the Blogger Blog Image Lazy Load Script to your blogger website.

Speeds make a larger role in website performance and traffic results by reducing the 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.

Using Image Lazy Load Script In Blogger.

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.

Follow The Guide Below:-
Step 1:  Open Blogger.com 
              Login to your blogger Dashboard.
Step 2:  Choose The Blogger Blog You want to add the 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 the search panel on the right upper column of the code block.
Step 6: Click on the dialogue 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.

<!-- wp:quote {"canvasClassName":"cnvs-block-core-quote-1612977436794"} -->
<blockquote class="wp-block-quote"><p><strong>&lt;!– starting the Lazy Load Script –><br>&lt;script type=”text/javascript”>// &lt; ![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)&amp;#038;&amp;!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(“&lt;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&lt; =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&lt;=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″})})<br>// ]]>&lt;/script><br>&lt;!– End of Lazy Load Script –></strong></p></blockquote>
<!-- /wp:quote -->

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 Jquery 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. In case you face any difficulty while implementing the following fields please reach me by Commenting below Or Contact Me.