About Lazy loading Javascript_javascript tips

Lazy loading of JavaScript is one of those problems on the web that makes you want to go crazy to find solutions.

Many people say "then use defer" or "async", and even some people say, "Put your JavaScript code at the bottom of the page code."

None of these methods can solve the problem of loading external JS after the Web page is completely loaded. The above method also occasionally allows you to receive the "Lazy load JavaScript" warning from the Google Page Speed Test tool. So the solution here will be a recommendation from the Google help page.

How to delay loading JavaScript

Here is Google's recommended code. The code should be placed before the </body> tag (near the bottom of the HTML file). In addition, I highlight the external JS filename.

<script type= "Text/javascript" >
function Downloadjsatonload () {
var element = document.createelement (" Script ");
ELEMENT.SRC = "Defer.js";
Document.body.appendChild (Element);
}
if (Window.addeventlistener)
window.addeventlistener ("Load", Downloadjsatonload, false);
else if (window.attachevent)
window.attachevent ("onload", downloadjsatonload);
else window.onload = downloadjsatonload;
</script>

What have you done here?
This code means to wait until the entire document is loaded and then load the external file "Defer.js".

Specific description

1. Copy the above code

2. Paste code before HTML </body> tags (near the bottom of HTML file)

3. Modify "Defer.js" for your external JS filename

4. Make sure your file path is correct. For example, if you enter only "Defer.js", then the "defer.js" file must be in the same folder as the HTML file.

Where this code can be used (and where it can't be used)

This code will not load the specified external JS file until after the document has been loaded. Therefore, there should be no JavaScript code to rely on for normal loading of those pages. Instead, you should divide the JavaScript code into two groups. A set of JavaScript code that is loaded immediately as a page needs, and another set of JavaScript code (such as adding click events or something else) that loads a LIFO operation on a page. These JavaScript code that waits until the page is loaded and then executed should be placed in an external file and then introduced.

For example, on this page I use the above file for deferred loading-Google Analytics,viglink (How I make money), and displays the Google + badge at the bottom (my social media). This is no reason for me to load these files when the initial page is loaded, because the initial phase does not necessarily load the unimportant content. You may also have files of the same nature on your page. Do you want the user to wait for these files to load before they can see the content of the Web page?

Why not use other methods?

Inserting the code directly, placing the script at the bottom, and using "defer" or "async" do not achieve the purpose of loading the page before loading JS, and they certainly cannot be consistent across browsers.

Why is it important?

It is important because Google makes page speed one of the ranking factors and users want to quickly load the page. In addition, it is also very important for mobile search engine optimization. Google measures page speed based on the initial load time of the page. This means that you have to get the Load event on the page as quickly as possible. The initial load time of the page is Google's evaluation of your Web page quality (and don't forget that the user is waiting for the page to load). Google actively promotes and recommends that the above insignificant content be ranked in order of importance, leaving all resources (js,css,images, etc.) out of critical rendering paths, and it is worthwhile to do so. If it pleases the user and makes Google happy, you should do so.

Usage examples

I have created a page where you can see the use of this piece of code.

Let you test the sample file

Well, to illustrate, I've made several sample pages for you to test. Every page does the same thing. This is an ordinary HTML page that contains a JavaScript script that waits 2 seconds to output "Hello World". You can test these files and then you will see that there is only one way in which the load time does not include 2 seconds of waiting time.

Direct Insert Script page-click here

A page with a "defer" external script-click here
Use the above recommended code page-click here

Key points

The overriding priority should be to deliver the content to the user as quickly as possible. And we haven't been thinking about how to treat our JavaScript code. But users should not be forced to wait for content because of trivial scripts. No matter how cool your footer is, there's no reason to have a user who might never scroll to the footer to load JavaScript files that make the footer cool.

The above mentioned is the entire content of this article, I hope you can enjoy.