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.
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.