External JavaScript - body or head?

Question

Possible Duplicate:
Where is the best place to put <script> tags in HTML markup?

Where should I put my external JavaScript file? I know that people put it at the end of the body tag to make the web page look like it loads faster. But is there any cons about putting it at the end?

And would this be a good practice to put the JavaScript with the Google Analytics code?

<body>
// Everything else over here ... conent etc..
     <script src="myjavascript.js" type="text/javascript"></script>
        <script type="text/javascript">
        // google analytics code
        </script>
</body>

I always put it in the head incase i need to call one of the functions in the body somewhere and i dont want to wait for the page to load before calling the function. — Johnny Craig, Jul 18 '12 at 21:29
@JohnnyCraig you should def. check out http://headjs.com - it's faster than loading with — rgvcorley, Jul 18 '12 at 21:34
As of head.js... it's not optional. My JavaScript only weighs 11 kb and the HTML 5 kb. (no images!) — Jason Stackhouse, Jul 18 '12 at 21:41
@rgvcorley I am Sheldon Cooper? head.js weigh over half of my own.js. — Jason Stackhouse, Jul 18 '12 at 21:49
It's 2.5kb minified and gzipped, admittedly if your own js is only 11kb then it's unnecessary but as soon as you start creating something with significant interactivity you're probably going to have a whole lot more js than 11kb — rgvcorley, Jul 18 '12 at 21:53
@rgvcorley I will put that in mind for the future. I added a new comment in your answer. — Jason Stackhouse, Jul 18 '12 at 21:55

score 7 · Accepted Answer · answered Jul 18 '12 at 21:29

7

Yes people usually put it at the end for faster page loads. What you have there with the google analytics script is common practice.

You might also want to check out head.js - this has been shown to be even faster than a single script put at the end of the body

answered Jul 18 '12 at 21:29

rgvcorley

2,883
4
22
41

Thank you! I'll have a look at head.js :) But what you meant about the Google Analytics code is to put it after my code or? – Jason Stackhouse Jul 18 '12 at 21:34
Depends - if you've got code in your javascript that enhances the UI visually then you probably want to put this before the GA code so that it loads first – rgvcorley Jul 18 '12 at 21:37
Apologies I meant before as you've got it - the script tags are loaded in the order they are encountered in the DOM – rgvcorley Jul 18 '12 at 21:40
Cool... I have this problem with my site: If you start my site, you get `undefined` because my really big array dose not load. This is because I have a random script going off when clicking "Enter" key. Might putting this at the bottom fix this problem because the script that happens on enter cannot start yet? – Jason Stackhouse Jul 18 '12 at 21:44
I suggest putting all your js in a DOM ready function - this will mean your javascript is not executed until the page has loaded. You can do this with all the major JS frameworks like jQuery, prototype, mootools etc... however if you don't want to use a framework then have a look here:- http://code.google.com/p/domready/ . I'd recommend using a framework if you're going to be doing alot of JS - cross browser JS is not trivial – rgvcorley Jul 18 '12 at 21:59
head.js link is not relevant anymore (site replaced by another content) – ofaurax Mar 27 '19 at 08:59

score 4 · Answer 2 · answered Jul 18 '12 at 21:30

Current recommendations are to place the javascript at the bottom not because it "looks like it loads faster", but because by placing them there, javascript parsing and execution doesn't stop the browser from doing other things (like loading the rest of the page).

The one con I can think of is that if you define any objects and functions in external JS and want to use them in the page, you must wait for page load/ready.

As for the Google analytics code - it is good practice to place it at the bottom, as in your example.

But it looks like it loads faster... the design comes up first = happier users! But you might be right! Btw, my code or analytics code first? — Jason Stackhouse, Jul 18 '12 at 21:37

score 4 · Answer 3 · answered Jul 18 '12 at 21:32

Placing your scripts at the end of your page will help improve the performance.

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.

Its important to note that before you can access any objects referenced in the external JS they must be fully loaded first.

External JavaScript - body or head?

3 Answers3