How to add Lazy Load Blogger Script in Google Blogger - PBT

How to add Lazy Load in Blogger
 Lazy Load Blogger Script

Media files such as images make our blog post look attractive and eye-catching. Images are heavy files and use a lot of space which leads to the slow page loading speed of our website and when we check the page speed it shows "Defer offscreen images", in short telling us to use Lazy Load script. If your website is using too many numbers of images then you should use the Lazy Loader plugin for Blogger.

If you are one of those, using the Google Blogger platform for blogging, then it becomes too difficult to install Lazy loading plugin as Blogger doesn't support installing plugins.

You might have spent too much time, trying to reduce, compress the size of your images, using software or other online methods but still, Page speed checker tool says to Defer offscreen images or consider using Lazy loading plugin.

But don't worry, with the help of this tutorial, you will learn how to significantly reduce the page speed loading time of your Blogger blog and boost it by installing Lazy Load script in Blogger.


    What is Lazy Loading?

    Lazy loading is an optimization technique for media files. Instead of loading the whole web page and rendering it, lazy loading plugin assists in loading only the essential part of the web page and delays the remaining.

    Benefits of Lazy Load plugin in Blogger

    • Using Lazy Load script in Blogger will make your content of your blog load first, images are loaded after the content is loaded.
    • Lazy load plugin makes your site loads faster and boosts your website SEO performance.
    • when images are lazy loaded, your web browser won’t need to parse resources until they are requested by scrolling down the page.
    •  Lazy loaded images will help the visitors to save data and bandwidth.

    Is Lazy Loading Bad for SEO?

    Using lazy load for blogger is undoubtedly a good practice for SEO. Search engines such as Google and others can deal with images which are lazy loaded. Google promotes using lazy loading in its Developers guide.

    Should I use lazy loading?

    It depends if your website is using a number of media files which are quite heavy to load then definitely you should use it, as using lazy load blogger script you will see good page speed performance.
    Advice - It is highly recommended to backup your existing template before customizing or making changes to your template as if something goes wrong, you can restore your original template.

    How to add Lazy load Blogger script?

    As you know using lazy loading blogger plugin will drastically improve your website performance, now let us add it to your website.

    1. Log into your Blogger
    2.Select Template or Theme and Click on "BACKUPthen Click on "EDIT HTML".
    3. Now search for the </body> and paste the below script just above the </body> tag.
    <script type='text/javascript'> //<![CDATA[
    // Fast Load
    (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:"https://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]>
    </script>

    Verifying Lazy Loading Blogger Images script

    There are many ways to verify that lazy load blogger images plugin is working or not. You can compare the page speed performance on GTMetrix or PageSpeed Insights with/without lazy loading or you can verify with the help of Inspect Element Feature of web browsers.
    • Navigate to your website.
    • Right-click on empty space and select "Inspect Element".
    • Select the Network Tab and then Refresh the page.
    • Scroll down and you will see images are getting loaded one after another. 

    Conclusion for Lazy Load Blogger Script

    This script is based on JQuery. Whenever visitors will scroll down your page, images will load one after another with an animation effect.
    If this tutorial about Lazy loader plugin for blogger helped you in optimizing the images of your Blogger blog then kindly share it.
    And if you find any difficulty installing this plugin, leave a comment below and I will get back to you.

    Bonus guide: How to add Table of Contents in Blogger.

    Post a Comment

    0 Comments