Quick and Easy Tools For Optimizing Your CSS
May 18th, 07 | 2 remarksIf you read my article on tips for optimizing your stylesheets, you may already be putting some of those things into practice. Here then, are a few nifty (and free) web tools to help you out a bit more.
- CSS Tweak - lets you check parameters for how much optimizing you want done. It has an upload or copy/paste feature, and it’s beautifully simple. Once optimized, you can either download the tweaked CSS, or copy/paste the new code from the box. I’m really picky about how my CSS is laid out with respect to spacing, but even without touching the line breaks, it optimizes nicely. I was able to see a difference of 13%. Removing the breaks it jumped to 23%.
- CSS Optimizer - does exactly what it says, and very well. You can optimize by URI, direct input or upload, but you have only one option - to keep line breaks or not. The output shows you before and after optimization amounts in KB and percentage. I was able to optimize by 14.61%, keeping my spacing intact. If I removed the line breaks it was 26.41%!
Keep in mind if you opt to have spacing removed by either of these tools - they REALLY crunch your code. Everything is tightened up to the point where it looks like one giant paragraph! Yikes. Too much for me, but if you don’t care go for it. :) I suggest keeping a backup with all your line breaks in place, so making edits later won’t be such a headache, then re-optimize when you’re ready to upload the changes.
- Speed Analyzer - is a favelet you can toss into your bookmarks, and use for testing an entire page. It includes analysis on CSS, images, scripts, objects and HTML, and gives you color-coded indicators about the results, each with additional info about page load time and external file sizes, and what to do about it. Very useful. If you’re running Wordpress with any plugins, however, it’s bound to throw out some script warnings. Even if you’re just running a couple of simple stat scripts, it’s going to flag them. Good tool overall though.
As an alternative to the first two utilities listed, you can compress your CSS using Gzip. Granted, this isn’t available as an online tool, but if you thought 26% was good (I did), you might be surprised to learn you can reduce your file size up to 80% by compressing and serving your CSS as PHP. If you’re raising an eyebrow right now, Fiftyfoureleven.com explains it much better than I ever could.
That was a good suggestion to keep a backup copy of the original on hand. May want to highlight that point. :)
The ‘favelet’ that runs the page through speed analysis is the same tool on the Web Developer Toolbar for Firefox. I think most developers use Firefox, but if there are any that are still stuck in the past — that would be a definite add to their Favorites.
May 20, 07 | 10:57 amGood call. I always forget about that feature on the WD toolbar. :)
May 20, 07 | 5:28 pm