About lazy loading JavaScript

JavaScript's lazy loading is one of those problems on web that makes you want to go nuts trying to find a solution.

A lot of people say "use defer" or "async." Some even say "put your javascript code at the bottom of the page."

None of the above approaches solves the problem of loading the external js after the web page is fully loaded. The above method will also occasionally cause you to receive a "lazy load javascript" warning from the Google page speed tester. So the solution here will be a recommendation from the Google help page.

How do I load JavaScript lazily

Here is the code recommended by Google. This code should be placed in < /body > Before the tag (near the bottom of the HTML file). In addition, I highlight the external JS file name.

<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's going on here?
This code means to wait until the entire document is loaded before loading the external file "defer.js".

specify

1. Copy the above code

2. Paste the code into HTML < /body > Front TAB (near bottom of HTML file)

3. Modify "defer. js" for your external JS file name

4. Make sure your file path is correct. For example, if you only type "defer.js", then file 1 of "defer.js" will be in the same folder as HTML.

Where this code works (and where it doesn't)

This code does not load the specified external JS file until the document has been loaded. Therefore, you should not place javascript code that you rely on for normal page loading. Instead, you should divide the JavaScript code into two groups. One group is javascript code that loads immediately because the page needs it, and the other group is javascript code that operates after the page loads (such as adding click events or something else). The JavaScript code, which has to wait until the page loads, should be placed in an external file before being imported.

For example, on this page I use the above files for lazy loading - Google analytics, Viglink (how I make money), and Google+ badges (my social media) shown at the bottom. This makes no sense to me to load these files when the initial page loads, since none of the above is necessary for the initial stage. Maybe you have the same kind of files on your page. Do you want users to wait for these files to load before they see the content?

Why not use some other method?

Inserting code directly, placing scripts at the bottom, and using "defer" or "async" all fail to load the page first and then load JS, and they certainly don't perform well across browsers.

Why is it important?

It is important because Google ranks page speed as one of its ranking factors and users expect pages to load quickly. In addition to the mobile search engine optimization is also very important. Google measures page speed based on the initial load time of the page. This means that you must get the load event on the page as quickly as possible. The initial load time is Google to evaluate the quality of your web page (and don't forget that users are waiting for the page to load). Google actively promotes and recommends prioritizing the above inessential content to take all resources (js,css,images, etc.) out of the critical rendering path, and it's worth the effort. If it pleases users and makes Google happy, you should.

Usage examples

I have created a page where you can see the code in action.

Let you test the sample file

Well, to illustrate, I've made a few sample pages for you to test. Each page does the same thing. This is a normal HTML page with an javascript script that waits 2 seconds and outputs "hello world". You can test these files, and you will see that there is only one method that has a load time that does not include a 2 second wait time.

Insert the script directly into the page. Click here

The page with an external script using "defer" can be accessed here
The page that USES the above recommended code can be accessed here

The key point

The overriding priority should be to deliver content to users as quickly as possible. We had no idea what to do with our javascript code. But users should not be forced to wait for content for unimportant scripts. No matter how cool your footer is, there's no reason for a user who might never scroll to the footer to load the javascript file that makes the footer cool.

This is the end of this article, I hope you enjoy it.