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/community that say to put ALL in the head… what can you say?
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 “common” 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.