Moving your javascript down the page does have a lot of advantages. To use an common phrase: “Content is King.” Generally speaking the first thing a user wants when they go to your site is content. By pushing scripts to the bottom of the page you free up the browser retrieve and display content first. But there are some serious questions you should ask yourself before you move all your scripts to the footer.

Does this Javascript have a profound impact on the users experience? Does your script dramatically change the way content is displayed or interacted with on your page? If it does, it is worth weighing the what is more important to your visitor. Take a look at Woot.com for example. They sell 1 product a day, so obviously the most important thing to their visitors is seeing what that one product is. If you click on the image as soon as it’s visible you get taken to the full size image on a new page. But what if you wait for the page to load? Now your presented with a slideshow of images showing the product from every angle.

This is a prime example of when not to move your scripts to the footer. When I visit Woot.com the first thing I do is click on this product image. If I click too early I’m punished for it and have to click back on my browser and wait patiently for the page to finish loading. Depending on what time you view Woot.com has a pretty dramatic effect on load times though. Which raises another question.

Does my ad network have an effect on my scripts? It’s not that the whole page is loading terribly slow, it’s that sometimes the ad network is performing painfully slow. This means I get to wait for the ad network to respond before I can use the page the way it was meant to be used. Keep in mind that some ad networks load asynchronously and will not cause your page to hang, but there’s a lot of them that don’t. Be mindful of how your ad network delivers ads and adjust your scripts to give a better user experience.

Should I user $(document).ready with my jQuery? Now that frameworks like jQuery and YUI are becoming excedingly common, it’s worth looking at how they are effect by script placement. The $(document).ready call with jQuery waits for the entire DOM to be present before running any scripts (this is different than waiting for the page to load). Let take another look at Woot.com. Their account/login buttons are shown by Javascript.

What I find interesting though, is that which div to display (login or account) is delayed until the DOM is loaded. The account button shown there is the only way to navigate to your account page, but once again you have to wait for the ad network to deliver ads before the rest of the DOM is loaded. If things are moving slowly that day, you have to wait up to 5 seconds to see something that is loaded and ready, but hidden from you!

How can you fix this issues? Be careful about what you put in the footer and what you put in a DOM loaded function. If you have something user critical, don’t be afraid to toss in a script tag just after that element with whatever Javascript is needed to make it function correct.

Take advantage of Google Libraries API. Using a Google hosted version of jQuery (or other framework) gives the best chance that your visitor has a cached version, saving load times while keeping the script in the header. Also look at options of compressing or minifying your Javascript so it can live in your header but with a reduced file size.

Don’t use Javascript for critical functions on your site. Yeah I know it’s 2011 and Javascript is no longer thought of as an evil thing, but there are still people who chose to browse with Javascript disabled. Keep this in mind when developing and as yourself if you could achieve the same effect with CSS or some server side script.

There really isn’t a do this, or don’t do this answer in the end. You have to use your better judgement and remember that just because someone says you should do it, doesn’t mean it right. Always step back and try to look at thing from the visitors perspective. What am I here for? What do I want to do or see first? In the end you always want your average visitor to be happy, not the guy checking your source and looking for where you included your Javascript.