There are plenty of opinions about organizing markup, but the W3C is the predominant authority in such matters. When referring to the proper position of script
tags, the latest W3C content is a bit vague.
The W3C Recommendation
“… when you want to make sure that your JavaScript is available before the main document loads, you need to add it to the head.”
The W3C suggests loading your JavaScript first (putting it at the top). This is right after they explain that it stops the page from loading (making your visitor wait).
Unfortunately, most of us would prefer our document is loaded before our JavaScript, so that we can begin to interact with it. For years, scripts have simply kept their scripts in the <head>
tag and used $( document ).ready()
to force it to wait for the document to finish loading before it executes.
Wouldn’t it be simpler to just put the script
tags at the bottom of the document? YES. In rare cases, you may want to keep it at the top, which you can view in the drawbacks below.
Script Tags at the Bottom
Just like everyone else says, script
tags should go right before the closing /body
tag. Yahoo, for example, says the same thing. I’m writing this in 2014 by the way. Maybe this will go out of style in a couple years, but for now, its considered best practice to put the tags at the bottom.
Benefits of Script Tags at the Bottom
- The page isn’t stuck on a white screen waiting for scripts
- Elements are loaded by the time your scripts want to interact with them
- Multiple items can be downloaded simultaneously (scripts only 1 at a time)
- If a 3rd party site is down, the script… and the site, will not load
Loading a script at the top halts all other downloads, resulting in one script at a time and only a white screen on the display.
Other content can be downloaded two at a time from each source, allowing many concurrent loads. It’s a much better user experience to have the page content load on the page first. If you use a content delivery network, they distribute loading of each request to serve from multiple sources. This results in the fastest loading.
Drawbacks of Script Tags at the Bottom
Some scripts need to run before the document loads, as it loads, or actually builds the page itself using document.write
. In this case, the script needs to be in the head
tag.
Instead of using document.write
though, new websites should take advantage of Ajax functionality in JQuery or other libraries.