Another technique for minimizing requests, image concatenation

May 9, 2007 on 10:21 pm | In ajax, http |

Here at Ajax Performance, I spend a lot of time (here and here, for example) discussing the network-side implications of design decisions for the simple reason that there’s no better way to improve the perceived performance of an application than to do more with less bandwidth. Sure, increasing connection parallelism is a neat trick to hide some of that download pain, but fewer objects is always the best answer.

I’ve seen a few good articles in the past month that give me yet another excuse to beat this drum. First, Steve Souders, Chief Performance Yahoo! at Yahoo!, goes so far as to make it Rule 1 in his upcoming O’Reilly title, High Performance Web Sites. For reducing the number of image requests, particularly for small images used as icons, Steve recommends combining all images into a map and using CSS to display different slices of the combined image in place of discrete downloads for each icon. This technique is explored in depth by Matthew Batchelder in this excellent howto article. Great stuff.

3 Comments »

RSS feed for comments on this post. TrackBack URI

  1. [...] First up is JavaScript and CSS streamlining where all scripts and stylesheets linked to a document can be combined and gzipped with one command: <%= javascript_include_tag :all, :cache => true %> <%= stylesheet_link_tag :all, :cache => true %> I discussed this technique briefly most recently here, though really that post is just a link to hard work done by someone else. As a refresher, this technique is useful because it reduces both the total bytes downloaded and the number of round trips to the server. As we continue to see, the best way to reduce the load time of a page is to reduce the number of trips back to the server. This is especially true in the case of JavaScript as these server requests are serialized, so we get no benefit from connection parallelism. [...]

    Pingback by Ajax Performance » Performance work on the run-up to Rails 2.0 — May 21, 2007 #

  2. [...] The RC for GWT 1.4 provides native support for image concatenation in a feature called ImageBundle. If you’ll recall, I discussed image concatenation in a round up last month, and it’s a key embodiment of our “First Principal of Performance Optimization” — reduce network requests as much as possible. [...]

    Pingback by Ajax Performance » GWT 1.4 provides easy, native support of image concatenation with special sauce — June 2, 2007 #

  3. [...] last session of the week was Steve Souders, who I’ve before, introducing YSlow, an interesting Firebug integration that analyzes and grades your application [...]

    Pingback by Ajax Performance » TAE Wrapup — August 5, 2007 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WordPress with Pool theme design by Borja Fernandez.
Entries and comments feeds. Valid XHTML and CSS. ^Top^