Order of CSS and Script Calls in a aspx page

Question

Is there any specific order in which the external CSS or Scripts should be called in a aspx page which could help a bit in decreasing the page load time?

i.e

script type="text/javascript" src="../Includes/JavaScript/jquery.ui.tabs.js" 
link href="../Includes/css/ui.all.css" rel="Stylesheet" type="text/css"

or

link href="../Includes/css/ui.all.css" rel="Stylesheet" type="text/css"    
script type="text/javascript" src="../Includes/JavaScript/jquery.ui.tabs.js" 

Or any other order?

Answer 1

The best practice is to put stylesheet calls to the top of the HEAD element and script calls to the bottom, preferably to the bottom of the BODY element.

See http://developer.yahoo.com/yslow/help/#guidelines for details.

Answer 2

Both need to be loaded, so I would go for a "no". Any order won't help increase the page load time.

Anyway, by habits, I load CSS before JS so that even if both are required to be fully loaded, at least, it seems so when CSS are.

Answer 3

Common sense says: put the one with the largest latency first.

Suppose load latencies of 100ms and 50ms respectively;

• if the request for the 100ms goes out say 10ms before the 50ms, the total latency becomes ( 0ms + (100ms || 10ms+50ms ) ) = 100ms.

• if the shorter request goes first, you get ( 0ms + ( 50ms || 10ms + 100ms ) ) = 110ms.

But make sure to differentiate between wallclock-time, throughput time, user experienced time.

Answer 4

Page load time can mean more than one thing, of course. For an end user, it can mean the time taken until something is visible on the screen. Or it can mean the time taken to download all resources.

You can only have two connections open at any one time to a given server (at least this was the case, see here for reference). So with that in mind, you should focus on a couple of points.

• Try to minimise the number of requests by combining JS and CSS files, and compressing them. There are a whole host of utilities out there to do this. This will probably make the biggest difference to anything you can do.
• CSS then JS is a good rule of thumb as Fermin points out. You're probably limited to what you can do with the order of CSS files by your cascade, and JS files by library dependencies. However try to ensure that you don't have two big files right at the top which will block other downloads in your session until they are complete.