How to Add Lazy Load Plugin in Blogger Blog to increase blog speed

by

Lazy Load Plugin for Blogspot, How to Add Lazy Load Plugin in Blogger Blog to increase blog speed | Blogger Lazy Load Plugin | How To Lazy Load Images | How To Defer Offscreen Images | Lazy Load Images In Blogger | What is Lazy Load | Why use Lazy Load Images

No visitor or reader likes slow websites. He immediately exits the website. That website SEO has a negative impact on and your site bounce rate rises.

Images take longer to load than anything. And if you use a lot of images in your article, it can spoil your page load time a lot.

In this case, you can set lazy load for your site’s images and boost website loading speed.

How to Add Lazy Load Plugin in Blogger Blog to increase blog speed

What is Lazy Loading?

Lazy loading is a type of programming technique that delays loading resources until they are really needed.

For example, a webpage in which images are not loaded until the user scrolls down to that location in that page. Lazy loading is also used in web and some software programs as well for mobile and desktop applications.

How does Lazy Load Images work?

Instead of loading all your images together, lazy loading only loads those images which appear on the user’s screen. That is, when a user scrolls down your website page then images of the website will be loaded.

How to Add Lazy Load Plugin to Blogger Blog

This post is written specifically for those bloggers who run their blog through Blogspot Blogging Plateform. Blogspot User to Fasten Your Blog That is, we follow many tips to increase its loading speed, because they do not get any plugin to speed them up like in WordPress. But in this post I brought Lazy Load Plugin for Blogspot.

What is the benefit of adding Lazy Load Plugin to the blog and it should not be used, or what is the effect of adding Lazy Load Plugin in Blog, many Blogspot users want to know about this. Today’s post for this It is focused on this topic, in which I will give you complete information about it.

How to increase the loading speed of a blog by adding Lazy Load Plugin to Blogger Blog?

Step – 1 – First of all you have to go to the Blogger Dashboard and click on the Theme.

Step – 2 – After the Theme page is open, you have to click on Edit HTML.

Step – 3 – After clicking on Edit HTML, the Theme Coding of the blog will open. In this coding, you can click anywhere with the mouse and press the Ctrl + F button. Now you can see that a Search Bar has opened in it. is.

In this, you have to type the </head> tag and press Enter Button. You can see that </head> will be highlighted in the Theme Coding of your blog.

Step – 4 – Now you have to copy the Lazy Load Plugin Code from the Code Box below and paste this code just above </head>. After Paste the Code, click on Save Theme which will save the Theme Coding.

<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)&&!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>

Now Lazy Load Plugin for blogger has been added to your blog, you can open the blog and see its effect. So Amojeet blog hope that you will like this blogging related blog post today. Suggestions or ideas can be commented through the Comment Box below.
This post from which you have received information about how to add Lazy Load Plugin to Blogspot Blog and what is the benefit of adding Lazy Load Plugin to blog, do share it on Social Media Plateforms. Thanks For Reading This Post, Happy Blogging >>Goodbye.

Leave a Comment