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

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 2

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.