Wednesday, May 2, 2012

JavaScript Compressors Comparison

Recently I got back a bit to my old hobby - writing JS in my spare time. There is something in me that makes me optimize things. I love optimizing, no matter if it'll be a drop in the ocean, a lost time. But no matter how much you optimize, you never can beat a JavaScript compressor. So, I decided to test a couple of JS compressors available for free online use and see which is the best. For this purpose I used two files, from some of my JS projects:

JSOS.js - 97.8 KB (100 227 bytes) of mainly procedure oriented code, written for my JavaScript Operating System 5 years back. The code is a crap. Not one standard is kept while writing. Hell, I didn't even knew there are standards back then. And I didn't knew about compressors neither, so I compressed as much as I could by hand.
portfolio.js - 45.9 KB (47 020 bytes) of mainly object oriented code, written for my portfolio. Code is a bit new (one year old or so), but I still don't like it :D

The compressors I choose to benchmark are:

1. Google's Closure Compiler
2. Yahoo's YUI Compressor
3. Microsoft's Ajax Minifier
4. Dojo's shrinksafe
5. Online Javascript Compression Tool

Ok, lets see how they do on default settings.

1. Closure Compiler
JSOS.js - 88.1 KB (90 220 bytes)
portfolio.js - 39.4 KB (40 374 bytes)
2. YUI Compressor
JSOS.js - 89.8 KB (92 035 bytes)
portfolio.js - 34.5 KB (35 406 bytes)
3. Ajax Minifier
JSOS.js - 88.4 KB (90 537 bytes)
portfolio.js - 33.9 KB (34 734 bytes)
4. shrinksafe
JSOS.js - 93.6 KB (95 885 bytes)
portfolio.js - 36.8 KB (37 767 bytes)
5. Online Javascript Compression Tool
JSOS.js - 89.2 KB (91 358 bytes)
portfolio.js - 34.5 KB (35 381 bytes)

Let's wrap-up these results in graphics:
Or in percents:
As we can see, the "default" winner for crappy procedure oriented code is Google's Closure Compiler with just 317 bytes ahead of Microsoft's Ajax Minifier. For object oriented crappy code, the "default" winner this time is Microsoft's Ajax Minifier, while previous winner, Google's Closure Compiler is at last place.
Now let's see what those compressors can do at their best:


1. Closure Compiler
JSOS.js - 35.5 KB (36 376 bytes)
portfolio.js - 31.5 KB (32 352 bytes)
2. YUI Compressor
JSOS.js - 89.8 KB (92 035 bytes)
portfolio.js - 34.5 KB (35 406 bytes)
3. Ajax Minifier
JSOS.js - 84.7 KB (86 767 bytes)
portfolio.js - 33.2 KB (34 056 bytes)
4. shrinksafe
JSOS.js - 92.3 KB (94 562 bytes)
portfolio.js - 36.1 KB (36 991 bytes)
5. Online Javascript Compression Tool
JSOS.js - 89.2 KB (91 358 bytes)
portfolio.js - 34.5 KB (35 381 bytes)

In graphics:
and in percents:
Yes, I noticed Closure Compiler, too! At first I thought it produced a non working code, but when I tried it - it works as a charm! I don't know how they did it, but they did it :) So apparently the "max" winner for crappy procedure oriented code is Google's Closure Compiler. For crappy object oriented code, the "max" winner is again Google's Closure Compiler with a lead of more that 1k of code. Notice Yahoo's YUI Compressor and Online Javascript Compression Tool - they both have the same numbers as for default test?!?!? Well, their default settings are actually their best settings. That's a bit disappointing, as default settings of some compressors are better that the best settings of YUI Compressor, and I know a lot of people are using it. So I recommend to those people to switch to Closure Compiler.

Let's make an average to name a winner by the normal formula:
1st place = 5 points
2nd place = 4 points
3rd place = 3 points
4th place = 2 points
5th place = 1 point
Results:

Closure Compiler YUI Compressor Ajax Minifier shrinksafe OJSCT
Points 16 10 17 5 13
So the order is:
1. Ajax Minifier
2. Closure Compiler
3. Online Javascript Compression Tool
4. YUI Compressor
5. shrinksafe
You agree with that? Neither do I. This formula is good for other uses. Here we should really find how many bytes are saved, average. Let's see the same table again, but this time with bytes and percents saved.

Closure Compiler YUI Compressor Ajax Minifier shrinksafe OJSCT
Bytes 95172 39612 48400 29289 41016
Percents 32.32 13.45 16.43 9.95 13.93
Now we see who the real winner is:
1. Closure Compiler
2. Ajax Minifier
3. Online Javascript Compression Tool
4. YUI Compressor
5. shrinksafe

So next time you need to shrink JS files, consider Closure Compiler as a good choice :)

3 comments :

  1. Congrats!
    Great comparison!

    ReplyDelete
  2. i find a free online js compressor service to compress your js code, so it will reduce the size of web page.

    ReplyDelete
  3. Copper Freer offers reliable and professional air compressor service. We provide our services in Leicester, Peterborough, Corby, Northampton, Nottingham, Derby, UK, Milton Keynes, Kettering, Coventry, and Lincoln. We offer regular services to yearly maintenance.

    ReplyDelete