Reduce HTTP requests: combine files

Starting point: RightSignature homepage / 47 HTTP request / 4.12s loading time

Ok, the RightSignature homepage is not yahoo.com or msn with tons of images, scripts and stylesheets, but a good example to illustrate how to save some response time by reducing the HTTP requests.

The problem is that most visitors (using Internet Explorer 7 and earlier) are limited to two simultaneous connections per Server. You´ll see this quite clearly by looking at the screenshots here:

Using asset hosts can help. Google Maps for example uses mt0.google.com through mt3.google.com to circumvent browsers connection limits. Even with asset hosts, there are still many requests which need to be made and the best solution is to avoid those requests if at all possible. So what can we do? Here´s two steps to greatly reduce your asset calls:

Step I: merging multiple CSS & JS files

In the current homepage, we see 6 requests to download multiple CSS files as well as 6 requests to download multiple JavaScript files. Multiple requests for CSS and JS files are relatively easy to resolve. We can manually concatenate all CSS files into one and update the includes in our HTML. We can do the same for our JavaScript assets. The issue is that doing this by hand is tedious and error prone.

fu-bundle makes combining JS & CSS files a breeze. By adding only two lines of code, fu-bundle will turn this:

  <% bundle do %>
    ...
    <%= javascript_include_tag "jquery" %>
    <%= javascript_include_tag "jquery-ui" %>
    <script src="javascripts/application.js" type="text/javascript"></script>
    <%= stylesheet_link_tag "blueprint/screen.css" %>
    <%= stylesheet_link_tag "blueprint/header.css" %>
    <%= stylesheet_link_tag "blueprint/footer.css" %>
    <%= stylesheet_link_tag "blueprint/landing.css" %>
    <%= calendar_date_select_includes "red" %>
    ...
  <% end %>

into this

<script src="/javascripts/cache/bundle.js?1236287847" type="text/javascript">
</script>
<link href="/stylesheets/cache/bundle.css?1236287937" rel="stylesheet" media="screen" type="text/css" />

A positive side effect is that fu-bundle also minifies the CSS & JavaScript code by removing unnecessary whitespace, comments and by shorting names.

Step II: Concatenating images using CSS sprites

What are CSS sprites? CSS sprites are a technique that uses CSS to control the placement and cropping of a large image to replace many smaller images. That is, instead of having 10 image buttons on a page, you create an image file with all 10 buttons on it (say offset each button by the height of the button) -- and then use the same image file in replacement of the original button images. Then you use CSS to offset and crop to the correct button image within the larger concatenated image file.

Phew! Now — again — this would be a pain to do by hand. So we look to a few friendly tools to help out. Here´s the three substeps:

1. Use smush.it´s bookmarklet to download all images from one as zip archive
2. Upload the zip to project fondue’s CSS Sprite generator
3. Use the sprite and the CSS code to update your HTML/CSS files

Result: -67% HTTP requests / -56% loading time

Cool, the page loads twice as fast as before. We started with 4.12 seconds and ended with 1.4 seconds (-56%) and we started with 47 requests and ended with 15 (-67%). But YSlow still gives us a D for our performance? We’ll see what we can do about that the next days.