Adsterra Advertisement
BloggerBlogger tips and TricksTips And Tricks

How To Add Lazy Load Script In Blogger / Increase Website Speed

How To Add Lazy Load Script In Blogger / Increase Website Speed

In This Post, How To Add Lazy Load Script In Blogger / Increase Website Speed. Using this Jquery script your website automatically boost / Speed up blogger blog.We can called it Lazy Load Plugin For Blogger /Blogspot with image optimized

How To Add Lazy Load Script In Blogger

There are lots of plugins to help WordPress loading speed which increases website speed for bloggers.   or Fast loading / Lazy loading is a WordPress plugin that creates various image loads and helps to load text from post photos quickly.  But what about Blogger Blog, how to successfully install lazy load script on  blogger template?  

Advertisement

Not many people know that if your blogger website is very slow then I am going to share a simple jQuery lazy load script which will help to speed up your blogger website or blog page.  Once you install lazy loading process or increase website speed plugin on your website template, your site speed will definitely increase during loading. 

After adding lazy script in Blogger website, you can see the immediate effect in the form of PageSpeed ​​Score on how much your website speed has increased.

Table Of Content(toc)

Advertisement

How to speed up Blogger blog / Increase Blogger Website Speed 

Optimize the website for fast loading – Optimizing photos is very important for fast page loading, Lazy Load says images will be lazy-loaded after text loads.  Today I will explain how to load image files and websites lazily in Blogger and how to increase page speed.

Adding lazy loading script in blogger template to improve the page loading speed fast from older time. If you using many types of images in your blog post, then lazy loading will make the page load faster by loading text with scroll. So that, If you speed up Blogger blog  then read this full article, How to Add Lazy Load Script In Blogger / Increase Website Speed.

What Is Lazy Load? 

Lazy loading is the practice of loading resources or files or text or delaying the start until it is actually necessary to improve the functionality of the website and save system resources.  The advantages of lazy loading include: – Reduces initial load time, – Lazily loading a webpage reduces page weight, enables page loading very quickly.

When you open a URL, your browser requests data from the server, downloads all images, files, texts, scripts, and all of this works to maximize bandwidth usage, increasing or decreasing page loading performance.  Your page loading is badly affected so is that bounce rate.  So to overcome this, increasing the text speed by delaying the image loading is the best alternative.  Which will help increase website speed.

How To Install Lazy Load Script in Blogger Website / Lazy Load Plugin For Blogger

Installing Lazy Load script in blogger / Image optimazed on Blogger blog, I will provide two method, You can use any one from here.

Method ➤ 1 

  • Go to Blogger Dashboard 
  • Theme 
  • Edite HTML
  • Now, Search for </body> tag. Then Paste the blew script code above </body> tag.

Script Code : 

<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>(code-box)

Method ➤ 2 

  • Go to Blogger Dashboard 
  • Theme 
  • Edite HTML
  • Now, Search for </body> tag. Then Paste the blew script code above </body> tag.

Script Code : 

<!– Lazy load offscreen images with lazysizes script start –>

<script async=’async’ data-cfasync=’false’ defer=’defer’ type=’text/javascript’>

//<![CDATA[

const hasSupport = &#39;loading&#39; in HTMLImageElement.prototype;document.documentElement.className = hasSupport ? &#39;pass&#39; : &#39;fail&#39;;document.querySelector(&#39;span&#39;).textContent = hasSupport;

//]]>

</script>

<!– Lazy load offscreen images with lazysizes script end –>(code-box)

  • Then replace image source code with blew code:  

<figure>

<img loading=”lazy” src=”your-image-URL” alt=”your-alt-tag” width=”500″ height=”555″ title=”your-title-tag”/>

<figcaption>your-image-cation</figcaption>

</figure>(code-box)

Adding lazy load script is most important not ily for an an seo optimized point of view that is improve user /visitor experience and to boost your Blog. Script in the website increase blog speed. If you are mentioned, how to read the add Lazy Load script in blogger, then you can increase the speed of the blogger site in any blogger site, easily to make Lazy Load Install on Blogger website.

Tags: Lazy Load Plugin For Blogger / Blogspot, Increase Website Loading Speed, Blogger Lazy Load Plugin, How To Add Lazy Load Script In Blogger / Increase Website Speed, How to speed up Blogger blog / Increase Blogger Website Speed 

Advertisement

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement
Back to top button