Updates from QA Training

Building Better Web Pages – Part 2 CDN’s and script placement

Where you place your script and CSS can have a dramatic impact on page load in this blog I want to address current best practice thoughts on where it goes in your HTML and why.

David Walker | 26 June 2012

Where you place your script and CSS can have a dramatic impact on page load in this blog I want to address current best practice thoughts on where it goes in your HTML and why.

Where you place your script and CSS can have a dramatic impact on page load in this blog I want to address current best practice thoughts on where it goes in your HTML and why.

Part 1 of the blog can be found here and talks about how you should of already optimised your script and CSS.

Script Goes at the Bottom

Scripts must be external, no ifs and buts. Putting any script as an internal resource in a live site means you are supplying the same information time and time again. So that means you'll be using.

<script type="text/javascript" src="…"></script>

Remember that you can not use anything in the script file until has fully downloaded nor can you put any script within that tag and yes the closing element is mandatory.

The current best practice is to place these script tags at the bottom of your page likely just before the closing body tag. The reason why is locked in the HTTP specification. It stipulates that browsers download no more than two assets from a host at a time in most instances and specifically that while a script is being downloaded no other downloads will occur.

Misplaced script tags can cause a significant rendering delay.


Where the script sits may depend on what is expected to do. My talented friend Robin Cannon pointed out that the amazing modernizr needs to do its magic before the <body> has rendered. So if the javascript is going to do something before the  body is rendered it needs to go in the <head>. If it is going to manipulate the renderd HTML the  <script> tags should go at the bottom.

CSS Goes at the Top

Putting CSS in the head allows the document to render progressively and thus more swiftly. Don't use inline styles and don't use <style> tags unless there is some seriously good reason to use them (I check).

Always use <link> never chain CSS together with @import. There have been some damn horrendous security black holes exploited with this and worse in some browsers the loading of the @import sheet stops parallel loads.

Use Content Delivery Networks (CDN)

If you search for top ten tips to improve use of jQuery you'll see having the script hosted by Google or Microsoft on one of their Content Delivery Servers are a great advantage.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. Thjose hops across networks matter and can slow things down.  Many of the big software houses such as Google and Microsoft provide them and assets you can use from them. For instance if you use jQuery  or similar script library are you providing it from your own server? If so why not take advantage of their generosity:



What benefits does CDN hosting give you? For starters decreased time in serving the file. Distributed servers exist around the world and the request will be answered by the server closest to the user (note this might mean server hops and not distance).

You will also get better parallel downloads. Remember that a browser is limited in terms of file serving from a single host well the script library is not on your host so it counts as a separate server request.

Thirdly there is more than a small chance that the user has visited another site already using one of these CDN's and has the script library cached.

I always talk about these concepts on my jQuery course and I find it interesting how many people tell me they cannot use a CDN. Often I find this because the business and user benefit has not been explored go back and argue the case to your company and get it clear why you should be doing this.

Groovy fact:

One of the things that often scare people about using CDN's is 'what happens if the CDN goes down?' its rare but it could happen. A pattern for solving this is to build in a redundancy. By adding a script on our server as a 'backup' we can check if the jQuery library has loaded from the CDN if it fails we dynamically add the script reference to the document.

Here is an example of the solution:

Fallback for CDN Hosted jQuery

In part 3 of this series I'll talk about cookies, caches and a sniff of where HTML5 is taking us.


David Walker

Portfolio Director - Digital Transformation and Emerging Technology

David is a change-driven technologist who works closely with organisations and industry experts to understand the opportunities and threats posed by new technology. David has designed multiple learning solutions that have helped organisations redefine their business strategy and culture – creating new business models that view IT as a strategic competency rather than a support function.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.