Beranda
blogging guides

How to Add Lazy Load JavaScript Script code in blogger

One of the best ways to speed up web page loading times is to lazy load javascript code that your page needs. Normally a large chunk of HTML is loaded for a webpage to load the pictures and other content embedded in that page. Lazy loading javascript code allows you to load the code at times when it's needed instead of immediately loading it. 

This is the guide for adding lazy loading 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 the user experience.

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

How To Add Lazy Loading Javascript code in blogger

What is Lazy Loading?

Lazy loading is a technique for optimizing your page's load speed by limiting the initial download to what the user needs to see on screen. If you have a lot of content or experience traffic, it can improve responsiveness and make your pages render faster.

The lazy load was developed in September of 2010 by Julian Shapiro for the sake of Google. Most sites that use this method put boilerplate code on their websites that Google can't read to load the resources when they were needed. As a result, the resources are loaded in browsers faster and save users from the hassles of waiting for slow websites with large amounts of bandwidth usage.

How to Add Lazy Load Javascript Code in blogger?

You have to follow step by step process to add lazy load javascript code to your blogger blog.

Step1) Login to your blogger account

Step2) Now go to the theme section

Step3) In the Theme section go to the Customize and in customize go to the Edit HTML

Step4) Now In the Edit Section you have to replace your external javascript with the lazy load javascript code

Please first create a backup of your files and then insert the following codes below.

Old code of Javascript Files:  
<script src="https://example.com/script.js"></script>
New Lazy Load Javascript Code for single javascript file:
<script>
  var resource = document.createElement('script'); 
  resource.async = "true";
  resource.src = "https://example.com/script.js";
  var script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(resource, script);
</script>
This code is only applicable when you have a single javascript external file.

New Lazy Load Javascript Code for multiple javascript files:
<script type="text/javascript">
function script(url) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    var x = document.getElementsByTagName('head')[0];
    x.appendChild(s);
}
</script>

<script>
script('https://yoursite.com/your-script.js');
script('https://yoursite.com/my-script.js');
script('https://yoursite.com/third-party-script.js');
</script>
This code is applicable when you have multiple external javascript script files or dynamic multiple javascript files.

Why do we have to Use Lazy Load Javascript Code in blogger?

The reason behind using lazy load javascript code is to load minimum content initially and then when a 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.

Benefits of Using Lazy Load Javascript code in blogger

  1. A huge benefit of using Lazy Load Javascript code in blogger is that it reduces page load time.
  2. Save bandwidth, load times are faster, blog page views are more frequent.
  3. Lazy loading improves the loading time of a blog. The visitors get to see the content quickly after clicking the page. It also minimizes the chance of your website crashing due to high traffic. The users will love it.
  4. It could increase your blog's loading speed by 80%
  5. Your website will experience a large boost in load speeds, especially on mobile devices.

Final Verdict

So if you have to improve the page speed of your website then I should recommend using this lazy loading javascript code this will drastically increase your page speed up to 80%. 

I hope you learn something new from these posts 

If you have any queries then join our telegram chat group

Telegram Group: BlogTriggers Discussion

Posting Komentar