Yahoo YUI Compressor vs. Microsoft AJAX Minifier vs. Google Closure Compiler
A little more than a year and half ago I created a MSBuild Task for the YUI Compressor that was very well received, and even highlighted on the YUI Compressor site. At the time of writing that article YUI Compressor was king of the hill, and for the most part the only game in town that was really designed for production level use. Since then a number of new competitors have been released by Google and Microsoft, and I wanted to see how they stacked up against the YUI Compressor.
Setup
For these tests I wanted to test a pretty complex set of JavaScript to really stretch the limits of each of the optimizers. So I choose jQuery 1.4 as the subject for the tests. I choose jQuery for many reasons, but the biggest is because it is very well known set of code for most developers, and it would be very easy for anybody to test in their applications.
The setup of my machine is as follows:
- Windows 7 Pro (x64)
- Java 6 Update 17
- .NET 3.5 SP1
Each optimizer and the version:
Testing
I ran the following from the command line on jQuery 1.4 raw source code to produce the following files. Here is the raw source code file that I used in my testing:
Microsoft
ajaxmin jquery-1.4.js -o microsoft.js
Microsoft (Hypercrunch)
ajaxmin -h jquery-1.4.js -o microsoft-h.js
Microsoft (Hypercrunch Combine Literals)
ajaxmin -hl jquery-1.4.js -o microsoft-hc.js
Google (Whitespace)
java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js jquery-1.4.js
Google (Simple)
java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js jquery-1.4.js
Google (Advanced)
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js jquery-1.4.js
Yahoo
java -jar yuicompressor-2.4.2.jar jquery-1.4.js -o yahoo.js
Yahoo (Minified Only)
java -jar yuicompressor-2.4.2.jar jquery-1.4.js --nomunge -o yahoo-m.js
Yahoo (Disabled Optimizations)
java -jar yuicompressor-2.4.2.jar jquery-1.4.js --disabled-optimizations -o yahoo-o.js
Yahoo (Preserve Unnecessary Semicolons)
java -jar yuicompressor-2.4.2.jar jquery-1.4.js --preserve-semi -o yahoo-s.js
Results
The above testing produced the following results.
| Size (bytes) | Command Options | Size Optimization | Place | |
|---|---|---|---|---|
| jQuery | 158407 | 100.0000% | – | |
| Microsoft | 93814 | 59.2234% | 8 | |
| Microsoft (Hypercrunch) | 70156 | -h | 44.2884% | 4 |
| Microsoft (Hypercrunch Combine Literals) | 67149 | -hc | 42.3902% | 2 |
| Google (Whitespace) | 94225 | –compilation_level WHITESPACE_ONLY | 59.4829% | 9 |
| Google (Simple) | 69467 | –compilation_level SIMPLE_OPTIMIZATIONS | 43.8535% | 3 |
| Google (Advanced) | 63384 | –compilation_level ADVANCED_OPTIMIZATIONS | 40.0134% | 1 |
| Yahoo | 76453 | 48.2636% | 5 | |
| Yahoo (Minify Only) | 94843 | –nomunge | 59.8730% | 10 |
| Yahoo (Disabled Optimizations) | 76465 | –disable-optimizations | 48.2712% | 6 |
| Yahoo (Preserve Unnecessary Semicolons) | 77384 | –preserve-semi | 48.8514% | 7 |
The results are pretty clear of who won the top prizes in the above results. Out of the top 5 ranking outputs Google and Microsoft both took two of the positions and Yahoo took 1. Google Closure Compiler placed first when the Advanced Options were enabled which did really surprise me that much, and Microsoft AJAX Minifier placed second when Hypercrunch and Combine Literals were turned on. The Microsoft ranking, however was very surprising to me because of the lack-luster reviews of RC6 that was released back in October.
There are a couple things that should be noted about Google Closure with Advanced Options, which may not make the most beneficial option for you to choose when you are trying to minify your files.
- Removal of Code You Want to Keep
- Inconsistent Property Names
- Compiling Two Portions of Code Separately
- Broken References between Compiled and Uncompiled Code
Because of how the file is being optimized, it alters your code and would require you to do extra testing before deployment and it would make the resulting output almost impossible to debug against your un-minified version. So for these reasons it may not be the best choice, if you value ease of testing over byte size of your files.
So which ever option out of Microsoft, Google, or Yahoo you decide to use, all will produce a much more optimized-for-size file than the original. And, in my opinion, if you are already using Yahoo in your build environment there really isn’t much of a reason to switch, unless you are in the top tier of websites and need to squeeze every byte out of the file for delivery over the internet.
Personally, I am going to keep using YUI Compressor, because it has been rock solid in producing minimized and obfuscated code for my current projects, but in the future I may consider going with Microsoft or Google depending on what I am trying to accomplish.
Tags: AJAX Minifier, Closure Compiler, Google, JavaScript, JavaScript, Microsoft, Yahoo, YUI, YUI Compressor
Social: 
|
January 18th, 2010 at 4:09 pm
What I’d really like to know is if any of the optimization techniques effect performance. I know some of them are doing weird stuff to get the compression level they are getting. So it makes you wonder if those changes will effect performance.
January 18th, 2010 at 5:57 pm
Hi Eric,
It is hard to measure performance in JavaScript, because each uses a different engine to run the JavaScript. So comparisons in JavaScript are only relevant within their own browser.
However with that being said, performance and changes is going I touch on in my next post. So stay tuned.
Nick
January 19th, 2010 at 7:12 pm
Closure Compiler Advanced mode should not be included here. Simple mode makes sense here because it leaves the global names alone, but advance mode is intended for application level compilations where global renaming and dead code elimination makes sense. Additionally, it would be good to show the results after gzip compression as the results can be very different.
January 20th, 2010 at 3:13 pm
What I was saying is that you could run a benchmark on jQuery with their normal distribution and then run it again with each type of compression to see if there is a difference. Something like this: http://github.com/kamicane/slickspeed
January 20th, 2010 at 5:07 pm
The Google closure compiler must not be that bad as the new jquery-1.4.min.js is produced using closure now!
January 20th, 2010 at 5:53 pm
Wow Eric,
That is a good setup for a 3rd post. I totally mis-understood where you were coming from, I thought you were talking about performance from the perspective of which optimized for the best performance. And you sort of were, I just attacked it from a different angle than running jQuery through all its tests.
http://www.coderjournal.com/2010/01/performance-optimizations-made-by-microsoft-google-and-yahoo-javascript-minimizers/
But running the above code through the normal jQuery tests also makes sense to see where the problems occur with each tool.
January 20th, 2010 at 7:22 pm
Yeah, I am really curious if some of the crazy crunching techniques that they are using is negatively effecting performance of the code. I want it to be as small as possible, but I’m not willing to sacrifice runtime performance.
January 26th, 2010 at 8:28 am
Since all content is ziped from any descent configured web server I just did a quick zip test to see how that changed the size.
Original compressed to 44964 bytes
microsoft-hc compressed to 24094 bytes
February 3rd, 2010 at 2:22 pm
@Joakim I love gzip compression but you need to be careful if you want to support IE6 (I hate IE6) because of some known problems with IE6 decompression of cached files http://support.microsoft.com/kb/823386/en-us
April 14th, 2010 at 9:43 am
Ajax Minifier performs a lot better than yahoo in all the cases. My wondering is how much it affects the performance.
April 24th, 2010 at 7:04 pm
We use YUI Compress with almost no problems — we use the FreeBSD port snd a PHP wrapper to create 1 “codeball.”
Honestly, 7k is not going to make me switch to something else, but somehow it doesn’t surprise me that Google did better with Microsoft trailing only a bit behind. Looks rather familiar, actually.
I know YUI doesn’t seem to slow _anything_ down, and seems to rename variables wherever it understands scope, do stuff to literals to make them smaller, and nix whitespace. I’m not sure what else you _can_ do, and I’m fairly sure doing much more will break some code.