Home
Blogger Guide
Page speed

How to enable Lazy-loading images on Blogger website.[Updated]

Follow the below steps to add a lazy load script for bloggers. It will apply the lazy load for all images automatically.

Website speed is one of the crucial factors for better ranking and on a blogger website, you will not find caching and image optimization plugins. So, in this article, we will discuss what is lazy loading and how you can enable lazy load on your blogger website.

How to enable Lazy-loading on Blogger

Images play important roles in website speed and If you are using lots of images on a webpage then it will request more resources and slows down your webpage loading speed. 

A website should load within 3 seconds for a better user experience but According to Google research average loading time of web pages is 22 seconds. To improve your website speed you need to better optimize your Images. 

In WordPress, you will find many Image optimization plugins like short pixel, Smush, etc but on the Blogger website, you have to manually optimize your images and upload them to your website. 

So you can follow some techniques to optimize your website speed by using image formats like .webp, JPG 2000 and You can also implement lazyload on a blogger website for better user experience and speed.

What is lazy loading?

Lazy loading is an optimization technique for Websites that delay the loading of resources or objects until they’re actually needed and reduce the initial load time.

For example, If a webpage has multiple images at the bottom of the page and the user has to scroll down to see the image, you can display a placeholder and lazy load the full image only when the user arrives at its location.

There are several benefits of enabling the lazyload for images. It reduces the initial load time by reducing the page weight and save both server and client resources. Lazy loading helps conserves bandwidth by delivering content to users only if it’s requested.

Steps to enable lazyload on blogger:

Follow the below steps to add a lazyload script for bloggers. It will apply the lazy load for all images automatically. There is no need to manually add the Inline <img> tags.

  • Go to the Blogger dashboard and click on the theme section.
  • Then click on Edit HTML from the drop-down menu.
  • On the HTML Editor click on ctrl + F and search for </body>  or scroll down to the end you will find this </body> tag.
  • Paste the javascript code just above the </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://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Now you have successfully implemented the lazy loading of images on the blogger website.

▶You can check the video tutorial here.👇

Now you can check your website speed on google page speed insight and It will show if the lazy load is properly implemented on your site or not. You can see in the below screenshot that my website passed the audit on lazyload.

Lazy load audit passed on page speed insight

If you have any doubts regarding Image optimization or Lazy loading script implementation on blogger ask me in the comment section. Also, Subscribe to our weekly newsletter to get updated on future content that we post regularly.

16 comments

  1. Good Try
    • Thank you. 👍
  2. Nice breakdown Abhishek. I had no idea lazy loading even existed. But it makes sense to reduce resources until the moment blogs need to load.

    Ryan
    • Yes, Lazy loading is super helpful to save bandwidth and boost page speed for a better user experience. 👍
  3. Thank you so much! But please can you tell me if it is working on my website? I can't tell the difference my website is: A Glug of Oil (dot com)
    • I don't tell you exactly as I don't know which theme are you using on your website.

      Take a backup and try yourself and if it didn't work upload the backup file.

      Just go to pagespeed insight and check if it is showing defer off-screen images error or not.
  4. Hello Abhishek,

    Thank You, "Your Content Helped us to improve our website speed which is on blogger".

    Regards,
    Jyotish
  5. And can you show us how to add this chatbox in blogger
    • This is a comment button that comes with the Fletro pro theme.
  6. Will adding lazy loading affects site ranking? Please tell me
    • No, it will not affect in site ranking. Infact, it will speed up your website speed and improve SEO ranking.
  7. I am blogger and I just post images on my blog that's why I was very worried about how to solve the loading image problem.
    I search a lot but did not find any solution.

    Now just visiting random about a new topic and find the solution.

    I am really thankful for this solution I am excited that I will find more new ideas about blogging.

    Thanks Again
    • Yes, You will find a lot of Blogger Tutorials here and You can follow our YouTube channel to learn more Blogging Tricks.
  8. It doesn't work with infinite loading in blogger 🙁
    • May be it has some issue with the theme, this code works perfectly for templateify themes and doesn't work with themes like median UI, Fletro Pro etc as they have their own lazy load script.