Does putting scripts on the bottom of a web page speed up page load?

Question

Yahoo best practices states that putting js files on bottom might make your pages load faster. Have anyone tried this? What are side-effects, if any?

Answer 1

As far as I can tell, it simply lets the browser begin rendering sooner.

Answer 2

It has a couple of advantages:

• Rendering begins sooner. The browser cannot layout elements it hasn't received yet. This avoids the "blank white screen" problem.

• Defers connection limits. Usually your browser won't try to make more than a couple of connections to the same server at a time. If you have a whole queue of scripts waiting to be downloaded from a slow server, it can really wreck the user experience as your page appears to grind to a halt.

Answer 3

One side effect would be that some scripts doesn't work at all if you put them at the end of the page. If there is a script running while the page is rendered (quite commmon for ad scripts for example) that relies on a function in another script, that script has to be loaded first.

Also, saying that the page loads faster is not the exact truth. What it really does is loading the visual elements of the page earlier so that it seems like your page is loading faster. The total time to load all components of the page is still the same.

Answer 4

If you get a copy of Microsoft's Visual Round Trip Analyzer, you can profile exactly what is happening.

What I have seen more often that not is that most browsers STOP PIPELINING requests when they encounter a JavaScript file, and dedicate their entire connection to downloading the single file, rather than downloading in parallel.

The reason the pipelining is stopped, is to allow immediate inclusion of the script into the page. Historically, a lot of sites used to use document.write to add content, and downloading the script immediately allowed for a slightly more seamless experience.

This is most certainly the behavior that Yahoo is optimizing against. (I have seen the very same recommendation in MSDN magazine with the above explanation.)

It is important to note that IE 7+ and FF 3+ are less likely to exhibit the bad behavior. (Mostly since using document.write has fallen out of practice, and there are now better methods to pre-render content.)

Answer 5

Your page should actually load faster. Browsers will open more than one connection to download three images in parallel, for example. On the other hand, the <script> tags in most browsers cause the browser to block on that script executing. If its a <script> tag with a src attribute, the browser will block to both download and execute. If you put your <script> tags at the end, you avoid this problem.

At the same time, this means that those pages don't have any JS functionality until they're done loading. A good exercise in accessibility is to ensure your site runs well enough to be usable until the JS loads. This ensures that the page will (a) work well for people with slow connections (b) work well for people who are impaired or use text-only browsers.

Answer 6

Putting them at the bottom is a close equivalent to using the "defer" attribute (even more info here). This is similar to how a browser cannot continue with page layout unless IMG tags have width and height information -- if the included javascript generates content, then the browser can't continue with layout until it knows what is there, and how big everything is.

So long as your javascript doesn't need to run before the onload event happens, you should be able to either place the script tags at the end, or use the defer attribute.

Answer 7

if you are developing for firefox/safari, you can always check with firebug/developer console as they show the loading sequence of files

Answer 8

There are some points.

1. It loads page fast since the JavaScript internal or external is on bottom.

2. If you have not used a onLoad method of window in JavaScript it will start execution as soon as it rendered. The Script at bottom ensures that your script will execute after page load.

3. If script is as a file means external then will render after the HTML image and other visual object that forms the page view.

If you are using fireFox then there is a plug in to check the performance. Please do hit the firefox site for this plugin.