More optimization of Peterbe.com - CSS sprites

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.

Follow @peterbe on Twitter

Comments

Related posts

Previous:

The 4-hour Work Week by Timothy Ferris 29 July 2009

Next:

Public calendars on Google Calendar 08 August 2009

Related by Keyword:

Fastest way to match a filename's extension in Python 31 August 2017

Don't forget your sets in Python! 10 March 2017

Optimization of QuerySet.get() with or without select_related 03 November 2016

How to no-mincss links with django-pipeline 03 February 2016

mozjpeg installation and sample 10 October 2015

Related by Text:

jQuery and Highslide JS 08 January 2008

I'm back! Peterbe.com has been renewed 05 June 2005

Anti-McCain propaganda videos 12 August 2008

Ever wondered how much $87 Billion is? 04 November 2003

Guake, not Yakuake or Yeahconsole 23 January 2010