

Ask YC: Best Javascript/CSS/HTML Compressors? - Poleris

I'm trying to bring down the size of a very well trafficked website and the next step seems to compress the Javascript/CSS/HTML so a smaller file(s) is sent to the client.<p>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.<p>Some notable examples I will be trying to emulate are:
http://www.google.com
http://www.msn.com<p>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.)<p>Thanks!
======
kalid
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://betterexplained.com/articles/speed-up-your-javascript-
load-time/)

HTTP caching (prevent redownloading of static content):
[http://betterexplained.com/articles/how-to-optimize-your-
sit...](http://betterexplained.com/articles/how-to-optimize-your-site-with-
http-caching/)

Gzip compression: [http://betterexplained.com/articles/how-to-optimize-your-
sit...](http://betterexplained.com/articles/how-to-optimize-your-site-with-
gzip-compression/)

~~~
Hexstream
You made HTTP caching fun! Thank you!!!

~~~
kalid
Thanks, you're welcome!

------
sanswork
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.

------
nostrademons
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.

~~~
Poleris
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"

~~~
nostrademons
<http://compressorrater.thruhere.net/>

------
Poleris
Also, does anyone have feedback on
<[http://developer.yahoo.com/yui/compressor/>](http://developer.yahoo.com/yui/compressor/>);
versus other alternatives?

~~~
konsl
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/>

