Ask YC: Best Javascript/CSS/HTML Compressors?
4 comments
If you want to minify your javascript, use Rhino to pack your files. But GZIP compression will give you most of the speedup.
Shameless plug, but people have found these articles useful:
Speed up your javascript: http://betterexplained.com/articles/speed-up-your-javascript...
HTTP caching (prevent redownloading of static content): http://betterexplained.com/articles/how-to-optimize-your-sit...
Gzip compression: http://betterexplained.com/articles/how-to-optimize-your-sit...
Shameless plug, but people have found these articles useful:
Speed up your javascript: http://betterexplained.com/articles/speed-up-your-javascript...
HTTP caching (prevent redownloading of static content): http://betterexplained.com/articles/how-to-optimize-your-sit...
Gzip compression: http://betterexplained.com/articles/how-to-optimize-your-sit...
I use yuicompressor for everything. I merge all the files into 1 then compress it. Saves on request overhead and amount of data that needs to be transferred and makes a big difference. Only issues I've had is with making sure I concat my files in the right order.
For JavaScript, I've settled on using JSMin (http://www.crockford.com/javascript/jsmin.html) + GZip at the server level. Someone did a test of various compression tools and found that while they had wildly varying sizes before GZipping, they all came out to roughly the same size after GZip, except that I think raw+GZip was a bit bigger than JSMin/Packer/YUICompressor+GZip. So there's no reason to pay the extra decompression & debugging overhead that Packer entails.
You'll probably want to concatenate all your JavaScript files together to save on HTTP requests. I wrote a dependency analyzer that reads dependency info off the JSDoc and automatically topologically sorts them to get the correct ordering. I'll probably open-source it and put it on the web when I get a chance to do some code cleanup and documentation.
I don't use anything for CSS; I probably should, but it hasn't been a big problem. I've heard that Dreamweaver will automatically remove whitespace for you, but I get annoyed by that kind of munging, and my guess is that GZipping will eat up all the bulk anyway. Just follow all the normal rules about factoring your CSS for maintainability - you want to actually think about what you're trying to accomplish, and assign rules based on the semantics of the page. The worst CSS bloat I've seen has come from coders just copying & pasting some CSS example off the web whenever they have a problem. Understand what you're doing & don't cargo-cult.
HTML is easy: use semantic HTML, understand what you're doing, don't add superfluous tags or attributes unless you need them. And GZip it, of course. I've never known HTML to be a problem, bandwidth-wise, unless you're serving up massive amounts of content.
You'll probably want to concatenate all your JavaScript files together to save on HTTP requests. I wrote a dependency analyzer that reads dependency info off the JSDoc and automatically topologically sorts them to get the correct ordering. I'll probably open-source it and put it on the web when I get a chance to do some code cleanup and documentation.
I don't use anything for CSS; I probably should, but it hasn't been a big problem. I've heard that Dreamweaver will automatically remove whitespace for you, but I get annoyed by that kind of munging, and my guess is that GZipping will eat up all the bulk anyway. Just follow all the normal rules about factoring your CSS for maintainability - you want to actually think about what you're trying to accomplish, and assign rules based on the semantics of the page. The worst CSS bloat I've seen has come from coders just copying & pasting some CSS example off the web whenever they have a problem. Understand what you're doing & don't cargo-cult.
HTML is easy: use semantic HTML, understand what you're doing, don't add superfluous tags or attributes unless you need them. And GZip it, of course. I've never known HTML to be a problem, bandwidth-wise, unless you're serving up massive amounts of content.
Do you have a link to: "Someone did a test of various compression tools and found that while they had wildly varying sizes before GZipping, they all came out to roughly the same size after GZip, except that I think raw+GZip was a bit bigger than JSMin/Packer/YUICompressor+GZip"
Also, does anyone have feedback on <http://developer.yahoo.com/yui/compressor/>; versus other alternatives?
YUI is great, but it won't remove trailing semi-colons in CSS. I've found YUI gives the best compression -- I used to use dojo shrinksafe.
Try this to compare: http://compressorrater.thruhere.net/
Try this to compare: http://compressorrater.thruhere.net/
i've heard good things about it. thats about all i can say.
I see many different tools out there, but none seem to be canonical. I would also prefer open source, if possible (or even start an open source project), as it may be possible to contribute back improvements.
Some notable examples I will be trying to emulate are: http://www.google.com http://www.msn.com
If you have any experience with this problem, please speak out! I'd love to hear about your experiences. I especially would appreciate information on how to ensure that the resulting output file is identical (functionally) to the input file and how to gauge how effective the compression was. (One has to take into account client-side caching and JS-processing time over a pure size comparison.)
Thanks!