Blogger4Ever

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 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. 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.


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

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 recources 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.

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 scrolls down the page to 2nd image and didn't scroll down further. In that case, Browser will only load 3 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 content will be loaded. This feature will be useful for our blog where we have lots of text with a large number of images. By using this lazy load code blogger sites 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 and others can deal with images which are lazy loaded.

Benefits of Lazy Load Script 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.
• when images are lazy loaded, your web browser won’t need to parse resources until they are requested by scrolling down the page.
• Lazy load script makes your site loads faster and boosts your website SEO performance.
• Lazy loaded images will help the visitors to save data and bandwidth.

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

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

1. Go to the 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.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgldIhXQy0aya-OB_P_tmia5wQNq2CdPlBQ3U7pvfqF2QczrFQRdoMrQO342BfM0LjAm459Uedp-1zkRd0kWeMeljICDL5AcZrxajwqdmJe7DHVGcjzu4ZsJDxxEOID3-fWV374v0xYBNo/s10/loadingku.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

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 code to your images code like loading="lazy".

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

Adding this small code 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 below 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 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.

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

You might also like: How To Lazy Load Adsense Ads In Blogger To Increase Page Speed
How To Add Hreflang (Language) Tags In Blogger
How To Add Custom Scrollbar in Blogger Using CSS?