About delayed loading of JavaScript

About delayed loading of JavaScript

When a website has a lot of js Code to load, the js Code placement location will, to a certain extent, reflect the loading speed of the webpage, in order to make our webpage Load faster, this article summarizes several notes and shares them with you.

The delayed loading of JavaScript is one of the problems on the web that can drive you crazy about finding a solution.

Many people say "defer" or "async", and some even 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. The above method occasionally prompts you to receive the "delay loading javascript" warning from the Google Page speed testing tool. Therefore, the solution here will be a recommended solution from the Google help page.

How to delay loading JavaScript

The following code is recommended by Google. The Code should be placed before the tag (close to the bottom of the HTML file ). In addition, I highlight the external JS file name.

?

1 2 3 4 5 6 7 8 9 10 11 12

<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 that after the entire file is loaded, the external file "defer. js" will be loaded ".

Description

1. Copy the above Code

2. paste the code to the HTML Tag (near the bottom of the HTML file)

3. Modify "defer. js" to your external JS File Name

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

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

This code will not load the specified external JS file until the file is loaded. Therefore, you should not place the javascript code that the page needs to be loaded normally. JavaScript code should be divided into two groups. One group is javascript code that is loaded immediately because of page requirements, and the other group is javascript code that is operated upon page loading (such as adding a click event or something else ). These JavaScript code that needs to be executed after the page is loaded should be put in an external file and then introduced in.

For example, on this page I use the above files for delayed loading-Google analytics, Viglink (how do I make money), and Google + badges (my social media) displayed at the bottom ). For me, there is no reason to load these files when loading the initial page, because there is no need to load the above-mentioned irrelevant content during the initial stage. You may also have files of the same nature on your page. Do you want users to wait for these files to be loaded before they can see the webpage content?

Why not use other methods?

Directly inserting code, placing the script at the bottom, and using "defer" or "async" cannot load JS after loading the page first, and they certainly cannot be consistent on different browsers.

Why is it important?

It is important because Google regards page speed as one of the ranking factors and users want to quickly load pages. In addition, mobile search engine optimization is also very important. Google measures the page speed based on the initial page loading time. This means that you must obtain the page load event as quickly as possible. The initial page loading time is used by Google to evaluate the quality of your web page (and do not forget that the user is waiting for page loading ). Google is actively promoting and recommending the importance of the above-mentioned irrelevant content, so that all resources (js, css, images, etc.) are separated from the key rendering path, in addition, it is worthwhile to work hard. If this can make users happy and make Google happy, you should do so.

Usage example

I have created a page on which you can see how to use this code.

Let you test the sample file

Okay. I have created several sample pages for you to test. Every page does the same thing. This is a common HTML page that contains a javascript script that waits for 2 seconds and then outputs "hello world. You can test these files, and then you will see that there is only one way, its loading time does not include 2 seconds of waiting time.

Insert a script directly. Click here.

Page with external script "defer"-click here

Use the above recommendation code page-click here

Key Points

The overwhelming primary task should be to deliver content to users as quickly as possible. We never thought about how to treat our javascript code. However, the user should not wait for the content for irrelevant scripts. No matter how cool your footer is, there is no reason for a user who may not scroll to the footer to load javascript files that make the footer cool.

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