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

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

Answer 3

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.

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

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

Answer 6

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.