Cloud Four Blog

Technical notes, War stories and anecdotes

Are CSS Sprites A Mobile Web “Worst Practice?”

There’s an interesting article on that talks about the pitfalls of using CSS sprites for mobile web content. While there are several reasons why sprites may not be a good idea, two stand out for me: CSS2 support is required for the necessary background positioning, and there may be longer term performance penalties associated with using the layout engine for positioning on every page.

That performance aspect is something to think about.  The author states that it may be better to deliver a set of images once, paying a relatively small penalty for extra (cached, with long expiration) HTTP transactions, than to pay a layout engine penalty on every subsequent page rendering.

I can’t say for sure, but I can certainly imagine that some mobile devices are better than others when it comes to page rendering performance.  As one of the commenters in the article states, this “brings us back to the golden rule in mobile: know thy browser…”.  What works best in the desktop world may not be best in the mobile world.

The W3C says that CSS sprites are a best practice for the mobile web so — this would seem to be a odds with that recommendation.  What do you think?

High Performance Web Sites (CS193H)

As many of you know, we’re fairly enamored with the YSlow techniques for understanding and evaluating web performance for web applications.  We have successfully used the information to improve the user-perceived performance for “traditional” websites and for mobile websites / applications.  We’ll be talking about more of those experiences in upcoming posts.

In addition to the work we’ve done for our customers, we also like to promote good practices that everyone can follow.  Which leads me to today’s post.  I’ve recently finished re-reading the slides presented as part of the High Performance Web Sites course at Stanford University.  These slides have been made available by Steve Souders and they provide a nice accompaniment to his book, High Performance Web Sites.  The course also included guest lectures, and those slides have been made available to anyone who is interested in web front-end performance.  The guest slides are chock full of real world information from people who really know this stuff.

If you are a web developer, you should familiarize yourself with the Yahoo Exceptional Performance info by reading their best practices list, reviewing the CS193H slides, and keeping the Souders book in front of you so you don’t forget to do it!