This code should be placed in your HTML just before the </body> tag (near the bottom of your HTML file). I highlighted the name of the external JS file.
What does this do?
This code says wait for the entire document to load, then load the external file “defer.js”.
1. Copy above code.
2. Paste code in your HTML just before the </body> tag (near the bottom of your HTML file).
3. Change the “defer.js” to the name of your external JS file.
4. Ensure the path to your file is correct. Example: if you just put “defer.js”, then the file “defer.js” must be in the same folder as your HTML file.
What you can use this code for (and what you can not)
For example, on this page I use the above file to defer – Google analytics, Google AdSense, and the third party scripts. There are no reasons for me to load these files for the initial page load because none of them are necessary to load the above the fold content. You probably have the same type of stuff on your pages. Are you making your users wait to load these before showing them your content?
Why don’t the other methods work?
The methods of inlining, placing scripts at the bottom, using “defer” or using “async” all do not accomplish the goal of letting the page load first then loading JS and they certainly do not work universally and cross browser.
Why does it matter?
It matters because Google is judging page speed as a ranking factor and because users want fast loading pages. It also matters a great deal for your mobile seo. Google measures your page speed from the the time it is called to when the page is initially loaded. This means you want to get to the page load event as quickly as possible. That initial page load time is what Google is using to judge your webpage (and let’s not forget your users waiting for it to load).
Google actively promotes and recommends prioritizing above the fold content so getting any resources at all (js, css, images, etc.) out of the critical rendering path is well worth the effort. If it makes your users happy, and it makes Google happy, you should probably do it.
I have created a page here that you can see using the code.
Example files for your testing
Okay, just to illustrate I have made some example pages for you to play with. Each page does the same thing. It is a plain HTML page that uses one script that waits two seconds then says “hello world”. You can test these and see that only one method will register a load time that does not include the 2 second wait.
- Page with script inline – here
- Page with external script using “defer” – here
- Page using the recommended code above – here