How To Add Lazy Load Images In Blogger To Improve Page Speed

Media files like 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 blogger website and when we check the page speed it shows "Defer offscreen images". If your blog is using too many numbers of images then you should use the Lazy Load Images Script for Blogger blogspot. Lazy load Images Blogger Script will help you to Defer Offscreen Images. Lazy load javascript Increase page loading speed. Learn how to add lazy load Images script in blogger to improve page speed.

lazy load, blogger, blogspot, page speed, webpage, websites, lazy loading images

This is tutorial add lazy load Images javascript code to your blogger blogspot. Tutorial here describes how to load and display only a segment of the page, a technique known as a lazy-loading or on-demand loading. This will improve your Blogger website performance by reducing the amount of data transferred over the network while improving user experience.

Page Speed is the most important factor on blogger, so we are going to add lazy load images to increase page speed in blogger.

What is Lazy Loading?

Lazy Loading is an optimization technique for websites that delay the loading of resources or objects until they're actullay needed and reduce the initial load time. If a webpage has mutliple images at the bottom of the page and user has to scroll down to see image, you can display a placeholder and lazy load the full image only when the user arrives at this location/Position.

There are several benefits of adding lazyload for images. It reduces initial load time reducing the page wieght and save user resources. For Example: If a blog post has 5 images and user/visitor scrolls down the page to 2nd image and didn't scroll down further. In that case, Browser will only load 2 images and thereby save some resources.

Why Use Lazy Load Images In Blogger?

The reason behind using lazy load javascript code is to load minimum content initially and when user scrolls down a page more resources or content will be loaded. This feature will be useful for our blogger blog where we have lots of text with a large number of images. By using lazy load blogger websites can load pages more quickly and saves bandwidth too and Using lazy load for blogger is undoubtedly a good practice for SEO. Search engines such as Google, Bing and others can deal with images which are lazy loaded.

Benefits of Lazy Load Script in Blogger

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

How To Add Lazy Load Images In Blogger To Improve Page Speed

Follow below steps to add a lazy load script for blogger blogspot. It will apply lazy load for all images automatically no need to manually add inline <img> tags.

1. Go to the your Blogger dashboard and click on THEME section.
2. Then click on Edit HTML from the drop-down menu.
3. On the HTML Editor Press Ctrl+F and search for </body>.
4. Paste lazy loading Images javascript code above/before tag and Save it.
JS Script
//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:"",effect:"fadeIn",threshold:"-50"})});
5. Now you have successfully implemented lazy loading of images on the blogger website.

How To Add Lazy Load Images Tag Manually

If you don't want to use lazyload images javascript code in your theme. Then you need to add manually a small piece of code to your images code like loading="lazy".

<img loading="lazy" src="#" alt="image alt tag"" />

Adding this code snippet to your image tag helps the browser to understand that this image will be lazy loaded. So, that browser will only load those image when the user scroll down to the page and reached the image position.

You can either use the automated script method or manual method to implement lazy loading images on your blogger blogs.

Verifying Lazy Loading Blogger Images Script

There are many ways to verify that lazyloading images working or not. You can compare page speed performance on GTMetrix and PageSpeed Insights with/without lazyloading.

If you want to improve page speed of your blogger website then I should recommend using lazy loading javascript this will increase your page speed..

You might also like: How To Remove ?m=1 From Blogger Blogspot URLs
How To Upload Images In Blogger And Find Image Url

Post a Comment

Post a Comment (0)
To Top