Remove Render-Blocking JavaScripts

Google suggests this, but I don't quite get what they mean with "deferredfunctions.js".
If I have 8 .js files which are not deferred how do I insert them in deferredfunctions.js - do I combine them?

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;


Open in new window

Who is Participating?
GaryConnect With a Mentor Commented:
There is a problem with asynchronous js in that you can never be sure in which order the files will finish downloading, smaller files will be quicker obviously
But those smaller files may depend on the bigger files - especially true if using jquery where you may have a js file with a few calls in it.
So when deferring the files you have to be careful about what you are deferring.
Of course the easiest way to speed up your page is to make sure all your js is just before the closing body tag - this at least doesn't slow down the loading/display of your site - you may not see any conditional formatting immediately, but we are only talking microseconds of a delay.
As your function above you just need to repeat the code you have in downloadJSAtOnload for each script file.  Or create the deferredscript.js and inside that you do the document.write for each script you have.

But remember these are just recommendations from Google - it is not set in stone.

There is also the async command which you can apply directly in the script tag but only valid in IE10+ (and all other fairly modern normal browsers) which makes it unhelpful at the moment.
Pawel WitkowskiSenior Javascript DeveloperCommented:
I'm not sure of your exact problem, but usually having all Javascripts at the end of the BODY should not block most important content to load before starting loading javascript. But I guess you've already know that.. ;)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.