Why is the standard to put the css and js file at the top and bottom of the page (respectively)?

Question

Just curious why there is a performance enhancement when you standardize a site with the css and js in the headers and at the top/bottom of the page.

I think CSS in the `body` is not even valid (I mean `link` and `style` tags and according to the [specification](http://www.w3.org/TR/html4/index/elements.html), I'm right ;) — Felix Kling, Jun 29 '11 at 08:39
you can find valuable information here : http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file — JMax, Jun 29 '11 at 08:40
Do you mean why there is a performance increase in putting resources inside the `` element? Because that isn't true. For example downloading JavaScript is blocking in nature. — Ben Everard, Jun 29 '11 at 08:55

score 17 · Accepted Answer · answered Jun 29 '11 at 08:40

17

That's not entirely correct. Said simply:

Style declarations should be as close to the top as possible, since browsers won't render your page before loading the CSS (to avoid a flash of unstyled content)
Script tags should be as close to the bottom as possible, since they block browsers from parsing after the tag before it is loaded and complete (because the script may change the document with document.write)

If you're interested in frontend performance, I highly recommend reading High Performance Web Sites: Essential Knowledge for Front-End Engineers by Steve Souders.

answered Jun 29 '11 at 08:40

Magnar

28,550
8
60
65

you can defer JavaScripts, telling the browser that the loaded JS do not alter the page. However, your answer is the most correct (at the time of the writting, so +1 from me) – Maxim Krizhanovsky Jun 29 '11 at 08:42
Not all browsers will respect `defer` unfortunately. – Magnar Jun 29 '11 at 08:43

score 6 · Answer 2 · edited Jan 19 '15 at 20:02

6

There are plenty of WHY's out there, but I always go with the one From Yahoo Developers

Rule 5 for High Performance Websites - Put Stylesheets at the Top

and

Rule 6 for High Performance Websites – Move Scripts to the Bottom

edited Jan 19 '15 at 20:02

trante

33,518
47
192
272

answered Jun 29 '11 at 08:43

balexandre

73,608
45
233
342

Thanks for links. Great explanations. – FrenkyB Jun 05 '16 at 07:13

score 3 · Answer 3 · answered Jun 29 '11 at 08:40

It's not standard to put js-files in the header, most of the time it's even better to put them at the bottom of a page, because then the js loads after the html is loaded. That enables the direct use of html elements (e.g. adding handlers to certain divs etc.). For css, especially the <link> tag, it's standard to use it in the header. This makes styling available for the html that is loaded in the <body>. The place of either css/js has little to do with performance.

score 1 · Answer 4 · answered Jun 29 '11 at 08:41

The reason to put CSS in the top is to load it before rendering the page, so the page is rendered with it's styles. Otherwise it will be rendered without the design, and later re-rendered. The JS often is loaded at the bottom, not at the top. The reason to load some JS in the header is to have it available in the page (otherwise you may call undefined object/function, if you have JS in the page body, that uses external libraries)

score 1 · Answer 5 · answered Jun 29 '11 at 08:42

AFAIK CSS is really only valid in header, but also, to both CSS and JS, they should be in the head so that by the time anything in the page requires them, they are definitely available.

For example, if you have a JS function call in the body of the page, but that function has not been declare before hand, then of course, you will get a script error.

In terms of performance, I'm not aware of any performance increases by having them in the head, but I could be wrong here. You can sometimes get performance improvement from some scripts by having them at the bottom of the page, but this is just because other content is rendered before hand (rather than the browser stalling rendering whilst loading external resources)

I was worried about what you described here where JS is called but the function doesn't exist yet because it's at the bottom. Maybe someone can add something please? — Marc Guvenc, Feb 08 '23 at 20:50

score 0 · Answer 6 · answered Jun 29 '11 at 08:40

0

CSS should be at the top, so the browser can start layouting immediately.

Javascript should be at the bottom. Javascript can contain document.write(), so the browser can not render anything after Javascript before it has run the Javascript.

answered Jun 29 '11 at 08:40

Sjoerd

74,049
16
131
175

score 0 · Answer 7 · answered Jun 29 '11 at 08:41

0

I could be a performance enhancement if you move your javascript to the bottom of the page...

answered Jun 29 '11 at 08:41

Jakub Konecki

45,581
7
87
126

score -1 · Answer 8 · answered Jun 29 '11 at 08:43

I think the benefits that you speak of can be more readily attributed to the placement of the code in a separate file rather than the includion of the files at a specific point on a page.

Certainly with JavaScript you can draw upon aspects such as minification and zipping more readily if they are put in a separate file.

If a JS or CSS file is used on multiple pages, then caching can also play a part in enhancing performance.

Why is the standard to put the css and js file at the top and bottom of the page (respectively)?

8 Answers8

Linked