Technology, WordPress

Speeding Up Your Site with CSS Sprites

I write about page speed quite a bit on this site and it’s an important part of the analysis and improvements we make to our clients’ sites. Aside from moving to powerful servers and utilizing tools like Content Delivery Networks, there are a number of other programming techniques the average web developer can use.

The standard for the original Cascading Style Sheet is over 15 years old now. CSS was an important evolution in web development because it separated content from design. Look at this blog and any other and the majority of the styling difference is simply in the attached stylesheet. Stylesheets are also important because they are stored locally in a cache within your browser. As a result, as people continue to visit your site, they’re not downloading a style sheet each time… just the page content.

One element of CSS that’s often underutilized are CSS Sprites. When a user visits your website, you may not realize that they aren’t simply making one request for the page. They make multiple requests… a request for the page, for any style sheets, for any attached JavaScript files, and then each image. If you have a theme that has a series of images for borders, navigation bars, backgrounds, buttons, etc… the browser has to request each one, one at a time from your web server. Multiply that by thousands of visitors and that can be tens of thousands of requests made to your server!

This, in turn, slows down your site. A slow site can have a dramatic impact on the engagement and conversions that your audience makes. A strategy that great web developers use is putting all of the images into a single file… called a sprite. Rather than making a request for each of your file images, now there only needs to be a single request for the single sprite image!

You can read about how CSS Sprites work at CSS-Tricks or Smashing Magazine’s CSS Sprite post. My point isn’t to show you how to use them, just to advise you to ensure your development team incorporates them into the site. The example that CSS Tricks provides shows 10 images that are 10 requests and add up to 20.5Kb. When gathered in a single sprite, it’s 1 request that’s 13kb! The round trip request and response times for 9 images are now gone and the amount of data is reduced by more than 30%. Multiply that by the number of visitors on your site and you’re going to really shave some resources off!

The Apple navigation bar is a great example. Each button has a few states… whether you’re on the page, off the page, or mousing over the button. CSS defines the coordinates of the button and presents the region of the correct state to the users browser. All of these states are collapsed together in a single graphic – but displayed region by region as specified in the style sheet.

If your developers love tools, there are a ton out there that can help them, including the Compass CSS framework, RequestReduce for ASP.NET, CSS-Spriter for Ruby, CSSSprite script for Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue’s CSS Sprite Generator, Sprite Master Web, and the SpriteMe Bookmarklet.

Screenshot of Sprite Master Web:

The MarTech blog doesn’t utilize background imagery throughout its theme, so we don’t have to deploy this technique at this time.

2 Comments

  1. 1

    Wait … isn’t the whole collection an “image” (or a “plane”), and each sub-image (or sub-group of images in the case of animated or interactively changing ones) a “sprite”?

    Maybe stuff’s been renamed since last time I handled this sort of thing but I coulda sworn the Sprite was the element that ended up being displayed, not the big data table it was pulled from.

    (“Sprite table”… that was it wasn’t it?)

    • 2

      We may be talking two different things, Mark. With CSS, you can basically specify which ‘portion’ of an image file to display utilizing coordinates. This allows you to put all of your images into a single ‘sprite’ and then just point to the area you wish to display with the CSS.

Leave a Reply