Improving Web App Performance with CSS Sprites

We’re always exploring ways to make our software run faster, and in Scoreboard 2.3 we've been able to improve performance in some interesting ways. This post should give you a little peek behind the scenes into some of the tricks we’re using.

Like most websites, we use images throughout our application. Here's an example of an up-arrow image next to some text.

In order to display this, your web browser gets all of the text on the page at once, and then asks the server for the images one at a time. This works great for many situations, but sometimes there are thousands of icons on a single screen. That means that your web browser has to have thousands of "conversations" with the server each time you display one of those screens!

In Scoreboard 2.3 we have a different approach, and it's dramatically improving performance.

The idea is to combine every single icon in the application into one huge image. Here's an abridged example with only 10 icons included.

When you first log in, your browser downloads this big image and remembers it. Then, every time it needs to display an icon, it shows only a little piece of the big image. It's like you're looking at the big image through a tiny window and you can only see a small piece of it.

The advantages of this approach are huge. There's only one image to load, which means that your browser no longer needs to have all of those "conversations" with the server. The end result is a software experience that just feels faster.