More optimization of - CSS sprites

05 August 2009   0 comments   Web development

Powered by Fusion×

I have now made the menu images on this site into a CSS sprite. Basically, instead of loading 6 different images totaling 10Kb it now only needs 1 image which is 7Kb! The difference in filesize isn't the big win here but the reduced number of requests is the big deal.

The number one tip from the Yahoo! Performance people is reducing the number of requests and this is what I've done.

To generate the sprite image I use the CSS Sprite Generator and then fiddled it a bit to make it work for this site. Thanks guys!

The major drawbacks of CSS Sprite images isn't really technical but it's just that it's an optimization hack. The next time I need to change any of the images I have to reapply the hack and there's a risk that by the time I need to get back into it I will have forgotten how to do it or where to go to do it. Anyway, I'm really pleased with the performance of this site now.


Your email will never ever be published

Related posts

The 4-hour Work Week by Timothy Ferris 29 July 2009
Public calendars on Google Calendar 08 August 2009
Related by keywords:
Fastest way to uniqify a list in Python 14 August 2006
mincss "Clears the junk out of your CSS" 21 January 2013
Gzip rules the world of optimization, often 09 August 2014
Optimization of getting random rows out of a PostgreSQL in Django 23 February 2011
Fastest way to thousands-commafy large numbers in Python/PyPy 13 October 2012
Optimizing MozTrap 04 June 2014
mincss in action - sample report from the wild 22 January 2013
mincss version 0.8 is much much faster 27 February 2013
OpenID, Attribute Exchange, SReg, python-openid and Google 23 April 2010
Python optimization anecdote 11 February 2005
DoneCal homepage now able to do 10,000 requests/second 13 February 2011
Optimization story involving something silly I call "dict+" 13 June 2011