/ Javascript

Fewer Bytes: what am I really gaining from Minification and gzip?

Earlier this week, I included an un-minified library in a PR for debugging purposes. My logic was "Gzip will take care of the slack" and it wasn't till a co-worker called me on it that I realized I had no idea what kind of byte-savings you can get out of minification, mangling, and compression.

A lot has been said about load time optimization, and you could literally write books on the subject (and many have), but as you've probably guessed, what I want talk about today are the three most common means of shrinking your scripts: minification (generally the removal of whitespace), mangling (modifying variable names and other more extreme means), and transfer compression (gzip).

Two of three of these (minification and compression) are effectively transparent; no changes to your javascript are required to use them. Mangling/uglification is safe in 99% of cases, and most uglifiers will let you know what operations they can't handle safely, generally reflective code. For instance UglifyJS can't handle eval or with, but will simply not mangle code that might break. It also gets tripped up on references a function's name, as such

	var eleventhPresident = function polk () {};
    if (eleventhPresident.name === 'polk') {
    	console.log('James Knox "Not that Knox" Polk');
    }

but offers no sort of warning, so failures can happen post-mangle.

The Shootout

Generally the majority of your site's code lies in the framework and libraries your code uses. I've built a basic project to take source files from a handful of popular frameworks, and try various combinations of minification, mangling, and compression, to see what your effort gets you.

Superficially it's what you'd expect: whitespace removal can't compete with more agressive compression. Compression and mangling are neck and neck.

Digging a Little Deeper

Though it's hard too see here (a Box-and-Whiskers plot would be better here), while mangling and compression are very close the byte-savings of compression are more reliable. Mangling is 2% better on average than compression (71% vs. 69%), but the standard deviation is double (8% vs. 4%).

When you think about it, it makes sense: a generic compression scheme like gzip doesn't care if your code is written in a way that plays nice with mangling tools, while the UglifyJs's of the world are forced to operate on compatible code.