Web performance Optimization Series (3): How to delay Loading JS

This article by Bole Online-j.c translation, Sunbiaobiao School Draft. without permission, no reprint!
English Source: www.feedthebot.com. Welcome to join the translation team.

Delay loading JavaScript

The lazy loading of JavaScript is one of those problems on the web that can make you want to go crazy and find a solution.

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 the above methods can solve the problem of loading external JS after the Web page is fully loaded. This method also occasionally lets you receive a "lazy-load JavaScript" warning from the Google Page Speed Test tool. So the solution here will be the recommended solution from the Google help page.

How to delay loading JavaScript

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

123456789101112

<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 has been done here?

This code means wait until the entire document is loaded and then load the external file "Defer.js".

Specific Instructions

1. Copy the above code

2. Paste the code in front of the HTML </body> tag (near the bottom of the HTML file)

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

4. Make sure that 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 the document has finished loading. As a result, you should not put the JavaScript code that you need to rely on to load the pages properly. Instead, the JavaScript code should be split into two groups. One group is the JavaScript code that loads immediately as the page needs, and the other is the JavaScript code that loads the last-line operation on the page (for example, adding a click event or something else). The JavaScript code that waits until the page loads and then executes it should be placed in an external file and then introduced.

For example, on this page I use the above file for lazy loading-Google Analytics,viglink (how I make money), and the Google + badge displayed at the bottom (my social media). For me, there is no reason to load these files during the initial page load, since the initial phase does not have to load the above insignificant content. You may also have files of the same nature on your page. So do you want users to wait for these files to load before they see the page content?

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 JS after loading the page, and they must not behave consistently across browsers.

Why is it important?

It's important because Google takes page speed as one of the ranking factors and the user wants to be able to load the page quickly. In addition, 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 have to get the page's Load event as quickly as possible. The initial load time for 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 pushes forward and recommends that the above-mentioned unimportant content be ranked by importance, leaving all resources (js,css,images, etc.) out of the critical rendering path, and it is worthwhile to do so. If this 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 code.

sample files for you to test

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

• Directly insert a script page – click here
• Pages with external scripts that use "Defer" – click here
• Page using the recommended code above – click here

Key points

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

About J.C

Web performance Optimization Series (3): How to delay Loading JS