How To Lazy Load Image In Blogger: Defer Off-Screen Images 2021

When working with bloggers one major limitation for the common users is they don't have various plugin support. Plugins like image optimization plugin, Caching plugin that will help store caching of your website. In this post, we are going to discuss how to install the lazy load script in your blogger.

As you know that Visual Content is really important for engagement and if there are images on your website it will take resources like cellular data and server to load when someone opens your page, which may slow down the performance.

{tocify} $title={Table of Contents}

To grab the attention of the users you should have LCP (Largest Contentful Paint) within 2.5sec for better engagement. According to Google, the average loading of the webpage is 22sec. Website speed matters a lot to gain traction.

Lazy Load

So with the limitation of blogger, the best way to optimize the speed is by using image formats like JPEG 2000, JPEG XR, and WebP plus also implement lazy load on Blogger.

Explain Lazy Loading

It helps in optimization for the website in which it delays the loading of image and video until they are needed which mean until user scroll toward it and reduce the initial server time.

If the web page contains multiple images and if users scroll down the page. The lazy load will load images one by one according to the scroller.

This technique contains several benefits, it reduces the initial server load time which decreases the size of the page at loading, it helps both server and user's cellular data. Lazy loading helps conversation of bandwidth by providing content to users when requested.

Enable Lazy Loading in blogger

Below are the steps to enable lazy loading in bloggers. It will be installed for every blog post image automatically. Before adding any line of code and script you should always back up your template and blogger content.

  • In blogger Click on Theme section
  • After Click on Edit HTML from the drop-down menu.
  • In HTML editor click on ctrl + F, paste and search </body>  or scroll down to the end you will find this </body> tag.
  • Paste the JS code above </body> tag and save it.

<script>
//<![CDATA[
// Lazy 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://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Now you have updated the script in the blogger and implementation is completed. Now as an operator you can check the website speed and other aspects in google Page Speed Insight. It will show in the Audits if lazy loading is implemented correctly or not. In the below screenshot that my website passed the audit on lazy load aka Defer offscreen images.

Lazy Load



    Another Way To Verify Lazy Loading Of Blogger Images

    If you assure if your lazy loading for Blogger post images is working properly or not. One way you can use GTMetrix comparison side by side or we can use the inspect feature of the browser for a live test.

    • Go to the page where you have implemented lazy loading.
    • Right-click on empty and Click on "Inspect Element".
    • Select the "Network" Tab and Refresh the page.
    • Scroll down and See your images getting loaded one after the other as you reach their viewport.
    • Here is a sample of how it looks:
    Lazy Load
    Images loaded once users scroll to their viewing region. This is called the lazy loading of images.

    There is also a lighthouse extension available in the Chrome web store

    • Add the lighthouse extension to your chrome.
    • Navigate to the page you want to verify.
    • Run the Lighthouse test and you should be able to pass the "Defer Offscreen Images" test.

    Congratulation you have successfully implemented lazy loading of images in blogger and also verified.

    About Creator- Rajat

    Rajat is all about valuable content Digital marketing. He creates content on Google tech news and searches Update. You will get the latest updates about SEO and the implementation of the marketing technique leveraging the Digital Medium.

    Post a Comment (0)
    Previous Post Next Post