About lazy loading JavaScript_javascript tips

JavaScript lazy loading is one of those problems on the web that can drive you crazy trying to find a solution.

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

None of the above methods can solve the problem of loading external js after the web page is fully loaded. The above method will also occasionally cause you to receive "delayed loading javascript" warnings from Google's page speed test tool. So the solution here will be the recommended solution from the Google help page.

How to lazy load JavaScript

The following is the code recommended by Google. This code should be placed before the tag (near the bottom of the HTML file). Also, I highlighted 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 is done here?
This code means to wait until the entire document is loaded before loading the external file "defer.js".

Specific instructions

1. Copy the above code

2. Paste the code before the tag of HTML (near the bottom of the HTML file)

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

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

Where can this code be used (and where cannot it be used)

This code will not load the specified external JS file until the document is loaded. Therefore, JavaScript code that depends on normal page loading should not be placed here. Instead, JavaScript code should be separated into two groups. One group is the javascript code that is loaded immediately because the page needs it, and the other group is the javascript code that operates after the page is loaded (such as adding a click event or other things). The JavaScript code that needs to wait until the page is loaded before executing should be placed in an external file and then imported.

For example, on this page I use the above files for lazy loading - Google analytics, Viglink (how I make money), and the Google badge that appears at the bottom (my social media). To me, there is no reason to load these files on the initial page load because there is no need to load the above irrelevant content at the initial stage. Maybe you have a file of the same nature on your page. Then do you want users to wait for these files to load before seeing the content of the web page?

Why not use other methods?

Inserting code directly, placing scripts at the bottom, and using "defer" or "async" cannot achieve the purpose of loading the page first and then loading the JS, and they certainly will not perform consistently across browsers.

Why is it important?

Its importance is due to the fact that Google uses page speed as one of the ranking factors and users also want pages to load quickly. It is also very important for mobile search engine optimization. Google measures page speed based on how long it takes the page to initially load. This means you have to get the page's load event as quickly as possible. The initial page load time is how Google evaluates the quality of your web pages (and don’t forget that users are waiting for the page to load). Google actively promotes and recommends arranging the above irrelevant content in order of importance and keeping all resources (js, css, images, etc.) out of the critical rendering path, and doing so is worth the effort. If it pleases users and makes Google happy, you should do it.

Usage example

I have created a page where you can see this code in use.

Sample files for you to test

Okay, to illustrate, I've made a few sample pages for you to test. Every page does the same thing. This is an ordinary HTML page, containing a javascript script that waits for 2 seconds and then outputs "hello world". You can test these files and you will see that there is only one method and its loading time is excluding the 2 seconds wait time.

Page to insert script directly – Click here

Pages with external scripts using "defer" – Click here
Pages using the above referral code – Click here

Key points

The overriding priority should be to deliver content to users as quickly as possible. And we have never thought about how to treat our javascript code. But users should not be forced to wait for content for some insignificant script. 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 files that make it cool.

The above is the entire content of this article, I hope you all like it.