Blog entries

  • Browsers strangeness ...

    2008/06/07 by Adrien Di Mascio

    ... 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.)


  • Command-line graphical user interfaces

    2008/09/01 by Nicolas Chauvat
    http://azarask.in/gfx/ubiquity_side.png

    Graphical user interfaces help command discovery, while command-line interfaces help command efficiency. This article tries to explain why. I reached it when reading the list of references from the introduction to Ubiquity, which is the best extension to firefox I have seen so far. I expect to start writing Ubiquity commands soon, since I have already been using extensively the 'keyword shorcut' functionnality of firefox's bookmarks and we have already done work in the area of 'language interaction', as they call it at Mozilla Labs, when working with Narval. Our Logilab Simple Desktop project, aka simpled, also goes in the same direction since it tries to unify different applications into a coherent work environment by defining basic commands and shorcuts that can be applied everywhere and accessing the rest of the functionnalities via a command-line interface.