... or when inverting two lines of code in your HTML's HEAD can speed up your web page rendering !

If you have the following HTML page:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://yourdomain.com/css1.css" />
    <script type="text/javascript">
      var somearray = [1, 2, 3];
    </script>
    <link rel="stylesheet" type="text/css" href="http://yourdomain.com/css2.css" />
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Firefox3 [1] will download the CSS sequentially, hence if both CSS get 250ms to download, this page will approximatively appear in more or less half a second.

Now, if you just move the inline script before the two CSS declarations:

<html>
  <head>
    <script type="text/javascript">
      var somearray = [1, 2, 3];
    </script>
    <link rel="stylesheet" type="text/css" href="http://yourdomain.com/css1.css" />
    <link rel="stylesheet" type="text/css" href="http://yourdomain.com/css2.css" />
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

The two CSS files are now downloaded in parallel, and your page now take about half time to render !

One of the lessons here is that optimizing your website's backend is great and necessary, but is a quite long term and hard job. On the other hand, optimizing the frontend is often easier and pays off immediatly (well, so to speak...). Don't forget that in complex and rich web sites, most of the time can be spent on the client side.

[1] It seems that Firefox 2 doesn't event try to download CSS in parallel.

Going further

http://developer.yahoo.com/yslow/help/images/OverallGrade_Size.png

Of course, this is quite browser-dependant ! It would be simpler if all browsers behaved the same way but fortunately, there is a very nice tool named cuzillion developed by Steve Souders at Google (formerly Chief performance at Yahoo and developer of Yslow, a firebug's extension which is able to point out performance problems of your site). This tool lets you create web pages online by inserting inline scripts, CSS, images, etc. and then test how long the page takes to be rendered in your browser. You can control the order of the inserted elements as well as customize their properties (how long it shoud take to download, choose another domain to download, if a script is defined with a script tag, an XHR, an iframe, etc.)

blog entry of