I’m working on one of the larger coding projects I’ve ever done and as such, it’s a great time to think about minimizing code wherever possible. The single stylesheet is growing large, and we’re using quite a bit of javascript code. These two things equal performance hit, especially on older computers. One great way to reduce this effect is code minimization. I first heard this mentioned by Molly Holzschlag at An Event Apart Austin. I made a mental sticky of it but since it wasn’t part of my daily goings-on, I didn’t give it much thought at the time.
The current project got underway a few months back and I started to realize that this is what she was talking about. Cool. Applied Geekness.
Put simply, for those who are new to this, code minimization is doing more with less in order to save your users time and resources.
Max Kiesler wrote an extensive article on this idea last Novemember and I recommend checking it out. Through Max’s links he lists in his article, and some Googling, I found three tools that work for my needs:
- JSLint - A handy tool for verifying the integrity of your javascript prior to optimizing it.
- JS Minifier - A web-based tool for minimizing your javascript code. Make sure you verify your code prior to packing it down.
- Packed.it - Andrea Giammarchi’s wonderful tool for compressing CSS and Javascript code. I used this to reduce my stylesheet.
In one form or another, each of these tools can be built and run locally, if you’re not comfy with using someone’s website.
How did it all work? My CSS file went from 88KB to 64KB. My primary Javascript file went from 20KB to 16KB. Roughly a 20% reduction. How can I improve this? I’ve got some more abstraction to do in a few Javascript routines and I’m sure I can improve on my CSS.
Try it out. In an iPhone world, you don’t want to deliver excess, unnecessary code. Minimization and optimization is crucial.
