I really like to know why people say "put external resorces on the head of the page", such as :
<head>
<script type="text/javascript" src="settings/myJavascript.js"></script>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="settings/style.css" title="Style" media="all" />
</head>
Is it not better to add these resources to the page only if it needs those resources? For example, when programming on PHP, if I have a page that needs some CSS instead of other that don't need it, will it be more intelligent to use link type or script src into that page, without loading everything in the top, isn't it?
I see many suggestions on forum/munity that say to put ALL in the head... what can you say?
I really like to know why people say "put external resorces on the head of the page", such as :
<head>
<script type="text/javascript" src="settings/myJavascript.js"></script>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="settings/style.css" title="Style" media="all" />
</head>
Is it not better to add these resources to the page only if it needs those resources? For example, when programming on PHP, if I have a page that needs some CSS instead of other that don't need it, will it be more intelligent to use link type or script src into that page, without loading everything in the top, isn't it?
I see many suggestions on forum/munity that say to put ALL in the head... what can you say?
Share Improve this question edited Mar 27, 2011 at 15:16 Andrei Sosnin 7306 silver badges16 bronze badges asked Mar 27, 2011 at 14:34 markzzzmarkzzz 48.1k126 gold badges319 silver badges534 bronze badges7 Answers
Reset to default 3The reason to use external resources, even if they include directives that aren't used on the current page, is to take advantage of HTTP and browser caching. The resource is only sent to the browser once, on first request. This is especially important for mobile devices as there is a great deal of overhead in sending additional resources over HTTP when using limited bandwidth.
You should put external JavaScript last in the page body, not the HTML head.
There are two things here, and I'm not sure which you are asking about.
Saying they should be in the <head> can mean as opposed to elsewhere in the document. Some people do put CSS links in the body, even though they aren't allowed there, and also while <script> is allowed in the body, it's almost always a better idea to put it in the head (and those cases where it isn't should be obvious, and even though can often be re-written to work better from the head, with the exception of cut-and-paste scripts relating to other services, where e.g. amazon give you a script to put in your page that they want to make simple for you, rather than requiring serious re-writing of your code).
As for whether it should only be in those pages that need them, there is a balance here.
Firstly, let's say that 90% of a CSS stylesheet's declarations are used on all pages in a site (this is a sign of a well thought-out style in itself). We could put the other 10% in separate files for some pages only, and indeed more likely 2% in one, 3% in another and 5% in yet another or something like that. However, since each URI access has its own overhead on top of the bandwidth of the actual stream downloaded, we probably lose more than we gain here.
Add in the effect of caching, and keeping it in one file is a clear winner.
On the other hand, say there are a set of resources in a site that have very different styling needs to the others. In this case the separate CSS might be as large or larger than the first one, so it makes more sense to have that as a separate file only used where necessary (also, it can make over-riding in the cascade work much better, e.g. if the "main" stylesheet gives a blue background then the second can give a red background and we indicate which we need simply by whether that stylesheet is there or not, without having to set different classes throughout the relevant HTML pages).
The same applies to javascript, a couple of functions used only rarely should probably still be in the "mon" javascript files, but a large set of functions for use only in one page should almost certainly only be loaded in that one page.
That said, we may choose to include the second js in a relatively light page that is likely to be hit before a relatively heavy page that will use it, just to take advantage of the caching. This latter I would consider more an optimisation of the site as a whole, than a concern of the design of that one page (considered as an individual page, the second js is clearly wasteful).
Edit:
Finally, it's just simpler to have a single file handling all of these items, and the waste in a few extra downloads may be justified by the reduced maintenance.
If your page only contains PHP, there is no need for external resources. (= no head, no doctype clarification, no <html> tags)
If it does contain minor or major HTML (or any other markup for that matter) it is highly adviced to use external resources.
For your javascript it's a best practice to put all your <script> tag in the bottom of the page just before just </body> tag. By doing that you make sure that all you page is loaded when your javascript begin to load, so it doesn't slow your page and make your visitors leave.
For CSS I generaly put my <link> tag on the <head> when I have only one CSS for all my pages. But if you have specifics CSS files for some pages you can use the same tecnhnic than javascript.
Actually the first tag in the head should be the Content-Type meta tag. The reason for that is that some older browsers sometimes ignore which Content-Type is sent by the browser and may decide to use a different encoding if they don't see the Content-Type (with a specified encoding) early. Those browsers usually only accept it as the first parameter.
Apart from that, the order in the head is not important. Of course scripts that are included before others are also loaded earlier, but this is only about the load order. Given that browsers are able to load multiple files at the same time, it is possible that a script that starts to download earlier is finished after one that was started to be loaded later.
The reason to put everything in the header is simply that the header is loaded first, and before any content is displayed, the header is processed. So any libraries or something you might need while displaying the page should be available before that and as such should be put in the header. All other script tags are only then executed when the browser gets there while rendering the page.
HTML head is processed before everything else, even when the whole page is only partially downloaded (it is assumed, that pages are loaded from the beginning to the end sequentially, i.e. not in random chunks, like via BitTorrent for example). It doesn't apply just to external resources, but to everything independent of the current page's content.
Internet can be slow and laggy sometimes and user agents (browsers) can be run on variety of platforms, including very limited ones. If the Internet connection has a long ping delay (for example, it's a satellite link), it will take considerable time for a request to make a plete round-trip. So you want the client to be able to request all these external items simultaneously. The sooner the browser can decide on whether to request a resource, the better -- this facilitates a quick page download, together with all the stylesheets, javascript code and whatnot.
And there is also a question of caching. It is usually assumed that stuff declared in the head of the page is immutable across requests, so it's good to be cached and only be requested as rarely as seems reasonable enough. This also speeds up things considerably.
I've seen the suggestions to include all external resources into your page as well. The logic for this is that once the resource is cached, it will speed up the user experience of the rest of the pages. On the flipside, you're going to get unnecessary scripts/styles on pages that don't need it and can even sometimes cause harm because you get behavior that you might not expect.
My advice is that, unless your styles/scripts are small (total < 100kb), you should only include them in the pages you need.
Also, CSS files should e at the top of your page (so the browser knows how to render the page) and JS files should e at the bottom of the page (This depends on your setup, sometimes you may not be able load it at the bottom because your page depends on JS being present right at the top).