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.
AJAX Minifier, Closure Compiler, Google, JavaScript, JavaScript, Microsoft, Yahoo, YUI, YUI Compressor
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.
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
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.
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
The Google closure compiler must not be that bad as the new jquery-1.4.min.js is produced using closure now!
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.
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.
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
@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
Ajax Minifier performs a lot better than yahoo in all the cases. My wondering is how much it affects the performance.
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.
Google Closure even in Simple mode is not fail proof yet. I’ve been using YUI for years and never had an issue. Then I tried Closure. I got 10% more compression than YUI, but it removed/renamed things in such a way that my web app had JavaScript errors. Debug the minified JavaScript created by Closure is a hard task (and even though I discover the problem, I won’t be able to fix it anyway) so I got back to YUI…
Best regards
In the first post of the thread at this URL: https://groups.google.com/d/topic/wro4j/3FXdUxaXRXo there are some benchmarks of code performance after minification/compilation by YUI, UglifyJS, Closure Compiler, and a few others. I was surprised to see how dramatic the results were: if you use Closure’s advanced mode, your code performs dramatically better.
There are also a number of other jsperf benchmarks that illustrate how some of the optimizations it makes perform on a variety of browsers. Overall, if you’re not using it, you’re sacrificing user experience. It’s been a while since I’ve posted to my blog, but I think this warrants an update, along with some other performance points I’ve had stewing for a while.