CODEWITHSUNDEEP
javascriptasp.netcss
Gopi
Gopi

Reputation: 5897

Order of CSS and Script Calls in an ASPX page

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?

Upvotes: 3

Views: 657

Answers (4)

Mark Chorley
Mark Chorley

Reputation: 2107

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.

Upvotes: 0

xtofl
xtofl

Reputation: 41519

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.

Upvotes: 0

Shikiryu
Shikiryu

Reputation: 10219

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.

Upvotes: 0

Fermin
Fermin

Reputation: 36111

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.

Upvotes: 2

Related Questions