48

I am about to embark on a new web project and I plan to put some JavaScripts in the <head> and also some before </body>, using the following scheme:

  1. Scripts that are essential for the UX of the page: in the <head>. As I've picked up perusing the web - scripts in the <head> is loaded before the page loads, so it would make sense to put scripts that are essential to the user experience there.

  2. Scripts that are non-essential to the design and UX (Google Analytics scripts etc.): before the </body>.

Is this a sensible approach?

Another approach would be to put all the scripts in the <head> and add defer attributes to the non-essential scripts. However, I read that older versions of Firefox don't pick up the defer attribute.

ivanleoncz
  • 9,070
  • 7
  • 57
  • 49
timkl
  • 3,299
  • 12
  • 57
  • 71
  • I think that's a perfectly acceptable approach. I read somewhere that `defer` doesn't work on a lot of browsers, but I could be hopelessly wrong. – Bojangles Oct 13 '11 at 08:45
  • 1
    I suppose it's all about taste. I personally add them before the body tag (in the head) and also add small snippets where needed inside the page. – ikromm Oct 13 '11 at 08:46
  • 1
    just noticed this looks like a dupe of http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-in-head-head-or-near. – Conan Oct 13 '11 at 08:50
  • 1
    I think I can look at this answer: http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup It may help you – Frias Oct 13 '11 at 08:55
  • 2
    website performance rule : put all css in the beginning(head) and put all javascript in the end of the page. – Rudy Oct 13 '11 at 10:22
  • The canonical question is *[Where should I put – Peter Mortensen Nov 21 '21 at 17:56

6 Answers6

31

I think a lot of developers run JavaScript just before the </body> so that it is run after all the elements have been rendered.

However, if you organise your code correctly, the position on the page doesn't matter.

For example, when using jQuery, you can ensure the code isn't run until the page and its elements are fully rendered by doing the following:

$(document).ready(function(){
   //Code here
});

Then the script reference can be put in the head tag.

Script tags should be referenced just before </body>. This prevents render blocking while the scripts load and is much better for site perception speed.

No obtrusive JavaScript should be used when using this technique.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Curtis
  • 101,612
  • 66
  • 270
  • 352
  • 21
    Don't forget, content loads faster when you move scripts to the bottom. Assuming that ajax isn't being used to load the pages default content. – daveyfaherty Oct 13 '11 at 08:56
  • 9
    Position is extremely important, even when using `DOMReady`. A lot of developers put javascript tags just before the `

    ` because all scripts are loaded and executed **synchronously**. When they are in the `

    `, the page rendering stops to download → parse → execute each script.

     – Lapple Oct 13 '11 at 09:27
  • 7
    (Piling on...) The primary reason for putting SCRIPTs at the bottom of the page is less about making sure the DOM is loaded (albeit an important reason) and more about making the page appear RESPONSIVE. If you load scripts at the top of the page the browser downloads them first and your content waits until they're downloaded -- this can make the page APPEAR to load slower, making users unhappy. – kingdango Oct 13 '11 at 13:47
  • 1
    But what happens if the user starts playing with the page. Suppose I've an AJAX dropdown which will start loading after the page has appeared to the user but while it is loading, the user clicks it! And what if a 'really impatient' user submits the form? – Hemant Tank Jan 03 '12 at 14:27
13

JavaScript code should be placed at the end of the document so that it doesn't delay the parallel loading of page elements. This does then require that the JavaScript code is written in a specific way, but it does improve the speed of page loads.

Also, ideally you could host references like this under a different (sub)domain. References to jQuery should be pointed to Google's CDN too.

See Best Practices for Speeding Up Your Web Site for more information.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Digbyswift
  • 10,310
  • 4
  • 38
  • 66
4

I'd say that's perfectly sensible. As you said, as long as you don't move essential scripts (e.g. jQuery, Modernizr, etc., etc.) out from the <head>, you shouldn't have problems.

Moving non-essential scripts to the bottom of the page should help with the perceived loading speed (that and minimizing / concatenating scripts).

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Conan
  • 2,659
  • 17
  • 24
4

One of the reasons you'd want to put scripts before the </body> is if they manipulate the DOM without user interaction, so you'll need the DOM to be loaded in order to be manipulated. Another way to do that is to add an event listener and run the scripts when the page has loaded, but this will require additional code, which might get complicated if you have a lot of scripts, especially ones you haven't written yourself. Putting them at the end of the page also will speed up page load, though in the case of DOM manipulating scripts you might get some not-so-pretty results from that.

Tivie
  • 18,864
  • 5
  • 58
  • 77
Nikoloff
  • 4,050
  • 1
  • 17
  • 19
1

It all depends on what you mean by "essential for UX". I agree with having Modernizr appear early for example, but not everything needs to load straight away. If you're trying to avoid a flash of unstyled text (FOUT), that's a good reason. Similarly, if you have scripts that affect how the page looks before the user does anything, you should load those early.

Don't forget though, speed is part of UX. There's no advantage in having some jQuery interaction ready to run when the user can't see the content it applies to yet. The difference between loading the scripts at the start of the end is a matter of seconds. If you let the page load first, the user will be using those seconds to take the page in, allowing you to load scripts unobtrusively.

Your page will load faster if you move scripts to the bottom of the page, and that makes a difference to your pagerank these days.

Also, some versions of Internet Explorer will throw errors if you try to run a script before the element it refers to has loaded.

Like Ed says, your scripts should be stored in a separate file, and in as few files as possible.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
-1

Put the JavaScript code in a separate file and place a link to it in the head part of the HTML.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ed Heal
  • 59,252
  • 17
  • 87
  • 127
  • 1
    That doesn't seem to be a good idea. Plenty resources (a lot described here) have mentions to put JavaScript (external or declared script), always before `

    ` tag. Here, I quote W3Schools: *Placing scripts at the bottom of the `

    ` element improves the display speed, because script compilation slows down the display*. But regarding the point of organizing JavaScripts on external sources: *there's no doubt that this is a good practice, indeed, regarding code readability, for example*.     – ivanleoncz Mar 18 '19 at 20:18