lazy load blogger script - Add Lazy Load Script [New Update]

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.

lazy load blogger script

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.

Also Read: Lazy Load Blogger Image

How to apply lazy load blogger script in blog ?

Step 01: At the end of this article you will get the code to download Lazy Load Blogger Script. First download it and copy it.

Step 02: First of all you have to open your Blogger Dashboard and login.

Step 03: Click on "Theme" option. First take back up of your old theme. So that if you make any mistake, you can restore your blog as before.

Step 04: After this click on EDIT HTML.

Step 05: Now come to the very end of your theme, here you will find </body> written.

Step 06: You have to paste the code above </body> which you copied earlier.

Step 07: Now save your theme.

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>

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

Note: This code is applicable when you have multiple external javascript script files or dynamic multiple javascript files.

Lazy Load Blogger Script [New Update] 👇

Download Click Here To Download

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

A huge benefit of using Lazy Load Javascript code in blogger is that it reduces page load time.

Save bandwidth, load times are faster, blog page views are more frequent.

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.