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

Question

Yahoo best practices states that putting JavaScript files on bottom might make your pages load faster. What is the experience with this? What are the side effects, if any?

Answer 1

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 2

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.)