How to add Lazy Load Blogger Script Quickly on your website

Hi Friends, let's see how to Create a Lazy load Blogger script on your blogger website. Website speed is the most important for your Google Ranking. So you may be familiar with caching and image optimization. so you want to add lazy load on your blogger website. just follow the simple steps below.

Images play a major role in the speed of a website. Using a large number of images on the webpage will consume more resources and reduce the loading speed of the webpage. A website should load within 3 seconds for the best user experience, but according to Google research, the average website load time is 22 seconds.

To speed up your website, you need to improve your images better. You can find many image optimization plugins like WordPress on short pixels, smash, but on the Blogger website, you have to manually update the images and upload them to your website.

Therefore, you can use some techniques to improve the speed of your website using image formats like. webp, JPG 2000 and enable lazy loading on the blog site to get better user experience and speed.

What is lazy loading?

Lazy Load Blogger Script is one of the best image optimization methods on websites. The lazy load will load all parts of your website without loading them immediately and delay loading only certain parts.

Lazy loading is an excellent website optimization technique that delays loading resources or items until you really need them and shortens the initial loading time. For example, if there are multiple images at the bottom of a webpage and users have to scroll down to view the images, you can show the locations and delay loading the entire image until the user reaches your location. There are several advantages to allowing late images

. Reduce initial loading time by reducing page weight and saving server and client resources. Provides lazy loading for users only when content is needed, which helps to save bandwidth.

My Experience to Lazy Load Blogger Script?

I have been improving the blogger’s page following PageSpeed ​​Insight’s guidelines and noticed "off-screen" or "lazy" image loading. I have tried to implement the lazy loading method on the blogger’s blog, but I have encountered some problems.

I tried different scripts, but the script reduced the page load. So can Blogger speed up loading by slowly loading all images? Answer Yes, Lazy Docs says that pictures should not be loaded after the text is loaded. Explain how delaying image file loading in Blogger can positively affect your page speed rating.

So, you want to add this script to the blogger website just follow the simple steps. first, hit the download button and download files on your device.

How to Enable Lazy Load Blogger Script Step-by-Step Beginner's Guide

Follow the steps below to add a blog delay script. This will automatically use lazy loading for all image elements of your blogger website. No need to add a shortcode to Blogger.

Step 1: Go to Blogger Dashboard

Step 2: Select the Theme Section and open the theme section.

Step 3: Click Edit HTML on the Theme Section.

Step 4: Press Ctrl+F and Find the </body> Tag.

Step 5: Copy the Javascript Script Given on Download File.

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

Step 6: Paste the copied javascript on top of </body> Tag.

Step 7: Save the Template.

Final Words

This script is based on jQuery. When your website's visitors scroll through your page all the images are loaded one after the other with animation effect without being passed immediately. This will increase the speed of your website. I hope this Script( Lazy Load Blogger Script ) helps you. One more thing Keep Support on my Blog and Share This Article. Follow my blog on Google News.