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.

caveat:

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:

https://developers.google.com/speed/libraries/

http://www.asp.net/ajaxlibrary/cdn.ashx

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---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
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.