URL: http://spritegen.website-performance.org/

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.

Comments

Your email will never ever be published.

Previous:
The 4-hour Work Week by Timothy Ferris July 29, 2009 Books
Next:
Public calendars on Google Calendar August 8, 2009 Misc. links
Related by category:
Fastest way to find out if a file exists in S3 (with boto3) June 16, 2017 Web development
Be very careful with your add_header in Nginx! You might make your site insecure February 11, 2018 Web development
<datalist> looks great on mobile devices August 28, 2020 Web development
How to have default/initial values in a Django form that is bound and rendered January 10, 2020 Web development
Related by keyword:
Fastest way to uniqify a list in Python August 14, 2006 Python
mincss "Clears the junk out of your CSS" January 21, 2013 Python, Web development
Django ORM optimization story on selecting the least possible February 22, 2019 Python, Web development, Django, PostgreSQL
Fastest way to match a filename's extension in Python August 31, 2017 Python