While developing CellGuided I found that a single page load was causing many hits on my web server.  I verified this by using the Network Timeline available in Safari.

You can enable this in Safari by accessing the Advanced Tab in the Safari preferences and checking “Show Develop menu in menu bar”. This will make a “Develop” menu appear under which you can choose “Show Network Timeline”.

The results of one of the pages on the CellGuided website is shown below:

Notice there are 3 different CSS files being requested and 14 different Javascript files.  Each of these is a separate round trip on the network from the browser to the server.  This delays the loading of the page in the browser.  In addition, it causes many requests to be sent to your server.

Here is the code to include the stylesheets and javascript files from my Rails application layout:

        <%= stylesheet_link_tag 'basic', 'redbox', 'stars' %>
        <%= javascript_include_tag 'prototype', 'scriptaculous', 'effects', 'dragdrop', 'controls', 'fabtabulous', 'redbox', 'application' %>

As you can see, each of the CSS and Javascript files are listed here.  By default, Rails will generate HTML that specifies each of these as a separate link or script tag.  Here is the relevant part from the HTML generated:

<link href="/stylesheets/basic.css?1228521008" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/redbox.css?1219727784" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stars.css?1228259425" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/scriptaculous.js?1199423234" type="text/javascript"></script>
<script src="/javascripts/effects.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/controls.js?1229984592" type="text/javascript"></script>
<script src="/javascripts/fabtabulous.js?1219335620" type="text/javascript"></script>
<script src="/javascripts/redbox.js?1219731184" type="text/javascript"></script>
<script src="/javascripts/application.js?1219813302" type="text/javascript"></script>

Wouldn’t it be nice to specify that all these files be concatenated together and delivered as a single file?  Rails has exactly this feature and it is very simple to enable.  Just add a “cache” parameter to the tags as below:

        <%= stylesheet_link_tag 'basic', 'redbox', 'stars', :cache => 'cache/all' %>

        <%= javascript_include_tag 'prototype', 'scriptaculous', 'effects', 'dragdrop', 'controls', 'fabtabulous', 'redbox', 'application', :cache => 'cache/all' %>

This will cause the CSS files to be “cached” as a single file.  The same will happen for the Javascript files.  When rendering the HTML, the link and script tags will now look like:

<link href="/stylesheets/cache/all.css?1228521008" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/cache/all.js?1229984592" type="text/javascript"></script>

The Network Timeline now looks like this:

One note of caution.  This requires your configuration file to have the following set correctly:

config.action_controller.perform_caching  = false

By default, this is set to false in your development environment and is true in the production environment.  This is nice as the files will remain separate for development purposes but be combined when running in production.