This was a great read. Certainly learned a lot of useful lessons on front-end optimizations. Written by Steve Souders (previously lead Optimization efforts at Yahoo!), who also developed YSlow! – a Firefox add-on (actually an add-on to the Firefox add-on called Firebug) that gives your web pages a grade from A through F and tells you how to make it better.
If you have a build script, you may be able to automate a lot of these things, like combining JS and CSS files, and optimize PNG files (check out http://www.phpied.com/give-png-a-chance/ to see how to optimize from the command line). If you’re going to optimize JavaScript, I would recommend YUI Compressor (http://developer.yahoo.com/yui/compressor/) since it’s not as greedy as Google’s Closure Compiler for JavaScript. The Closure compiler (http://code.google.com/closure/compiler/) is relatively new and you may get even smaller files, but if your JavaScript is complex, it may have bugs because it’s a greedy compiler.
Anywhoot, here’s what I got from it:
- Reduce as many HTTP requests as possible.
- Minify JavaScript (don’t obfuscate, because it’s more trouble than it’s worth for the benefits you get)
- Minify CSS and optimize it (reduce duplication).
- Future-expire resources for caching (PNG, JPG, GIF, JavaScript and CSS).
- Minify HTML (get away from tables)
- Put CSS at the top, put JavaScript at the bottom.
- For design components (background images, button images, nav images), use CSS sprites.
- Use PNG for design components (they compress better than GIF, have partial transparency, and can have greater color palettes).
- Gzip non-binary data like HTML.
- Combine CSS and JavaScript into single files to reduce HTTP requests.
A summary of his optimization rules are found here, but of course, it’s not as detailed as the book: http://stevesouders.com/hpws/rules.php .
Stoyan Stefanov, another prominent developer who’s written tons on JavaScript and optimization, published 24 articles this month on optimization. I find these articles invaluable. It’s recent and he does actual optimization tests and tells you what tools he uses. Here’s the site: http://www.phpied.com/performance-advent-calendar-2009/
