Hosting
Green web hosting packagesTutorials
Beginners guides to SEO & hostingBeginners guide to Web Hosting
Positioning HTML references to files
By now we hope that you have just one CSS file and one Script file- here’s where to put them.
CSS files at the top – When a visitor clicks on a link to your site, they are much more likely to wait for your page to load if they can see something happening. If some of the page starts to show they will be reassured that the site is not dead and it is just about to load. Once the browser has loaded the html it will most likely see lots of references to classes which at that point it will not know how to process… so it can’t start showing the page until it has the CSS. For this reason, the CSS file should be the first one mentioned; in the <head> section of the document and first on the list. Once it has the CSS and the html it can start to display the page even if it has not downloaded things such as images and the visitor is most likely to bear with you whilst the rest of the page loads.
Script file at the bottom – In contrast to the CSS, Script files actually hold up the display. In an eariler section we talked about the fact that the browser may download several files at once. This is true until it comes to a <script> file. Since script may change the html, the browser will neither display or load any other parts of the page until the script file is downloaded and so the whole page is waiting for the one item. This is particually bad if the script file is from another domain (such as AdSense adverts) since the response time can exceed 10 seconds at times and this means that your visitors get a blank screen for this time- most will leave!
By placing script files at the end of the html (just before the </body> tag) the whole page is loaded and displayed before the roadblock so the visitor will not get frustrated. If you have something positional (such as an AdSense advert) you can place it at the bottom of the page and reassign the position using your css. An example of this can be found on our metric conversion website where adverts displayed throughout the pages are always declared at the bottom of the page.
Next section: create an image sprite
Index of all our tutorials: Wight Hat tutorials