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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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.. ;)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.