Ajax Performance

Happy Sprite Day!

Good thing I’m sitting on a train to New York, enjoying WWAN connectivity, because Ajaxian seems to think it’s sprite day, posting links to no fewer than 3 articles on the optimization technique.

First, the self-described Big Dumb Developer analyzed the performance of the new .Mac Gallery, found it lacking, and suggested some improvements: in this case, image concatenation a la CSS sprites. However, I’m not totally sold that spriting is the appropriate optimization for this scenario. The numbers he provides for his technique, while gaudy, appear a bit soft — the timing mechanism only covers the client side performance of swapping in different images, as far as I can tell. Also, as one commenter on the blog rightly points out, this approach does not fill the cache with the individual images, so it’s quite possible you’ll need to redownload them in other parts of the application.

Finally, CSS sprites are more appropriate in cases where the size of the images being downloaded is very small; in that case, the latency of sending a request significantly outweighs the download time for each object, so we are looking to hide latency by combining objects into one (still small) image. In the .Mac case, each image is fairly large, so combining them into one even larger image isn’t a huge win, and we would need to wait for the whole thing to load before displaying anything.

A more appropriate optimization in this case, in my opinion, is to exploit connection parallelism using the CNAME hack. Given that there are hundreds of images, using 6 (IE max) or 8 (Firefox/Safari max) persistent connections in parallel is much better than the 2 allowed by default. With this approach, we are cutting latency by a factor of 3 or 4, the images will live happily in the cache (as long as we are careful to use the same hostname for an image every time it is called), and we don’t have to wait for all content to load before being able to display something.

The next article is from Glen Lipka, another of the great people I had the pleasure to meet at TAE last month, who hopes to improve the manageability and reliability of CSS sprites. After wrestling with the verbose CSS syntax necessary to make this approach work in current implementations, Glen provides several alternative approaches, with examples. His approaches also have the benefit of degrading gracefully in the absence of JS support.

Finally, sprites get a brief mention over at snook.ca, with a few links to articles explaining the approach.