Comparison of the effectiveness of minimizers CSS-and JavaScript-code

Developers using Bundle Transformer often ask me: “Which minimizer has the highest compression ratio?”. In principle, in September last year, in my article “Bundle Transformer 1.6.2 came out or what has changed in six months?” I already conducted a comparison of minimizers in the degree of code compression, but this comparison was superficial and was not supported by numbers.

In this brief article we will compare the most popular algorithms for minimizing CSS and JS code using the example of minimizer adapters from the Bundle Transformer. Bootstrap.css and bootstrap.js from Twitter Bootstrap version 2.3.2 will be used as source files. We will measure file sizes using YSlow .

Comparison of CSS minimizers

The size of the original bootstrap.css file is 127.3 KB, and after applying GZip compression it is 27.9 KB. The table provides information about the file sizes obtained by applying different CSS minimization algorithms to the bootstrap.css file:

Minimizer adapter	Minimization algorithm	Size after minimization	Saving	Size after minimizing with gzip compression	Savings with gzip compression
YuiCssMinifier	YUI CSS Compressor for .Net 2.2.0.0	106.0 KB	16.73%	24.5 KB	12.19%
MicrosoftAjaxCssMinifier	Microsoft Ajax CSS Minifier 4.92	105.7 KB	16.97%	24.5 KB	12.19%
KryzhanovskyCssMinifier	CSSO 1.3.7	105.6 KB	17.05%	24.6 KB	11.83%
WgCssMinifier	WebGrease Semantic CSS Minifier 1.3.0	-	-	-	-

From the table it is clear that the CSSO minimizer (CSS Optimizer) from the company Yandex showed the best result. The main advantage of this minimizer is support for structural minimization of the CSS code (structural minimization can be found in more detail on the BEM methodology website).
')
Unfortunately, Microsoft's structural minimizer WebGrease Semantic CSS Minifier dropped out of the fight because it could not minimize the bootstrap.css file.

Microsoft's other minimizer, Microsoft Ajax CSS Minifier, on the contrary, showed a very good result compared to its main competitor YUI CSS Compressor for .Net.

JS-code minimizers comparison

The size of the original bootstrap.js file is 61.9 KB, and after applying GZip compression it is 16.9 KB. The table shows information about the file sizes obtained by applying various JS minimization algorithms to the file bootstrap.js :

Minimizer adapter	Minimization algorithm	Size after minimization	Saving	Size after minimizing with gzip compression	Savings with gzip compression
CrockfordJsMinifier	JSMin dated 05.22.2007	34.5 KB	44.26%	11.1 KB	34.32%
Edwards jsminifier	Packer 3.0	31.3 KB	49.43%	10.4 KB	38.46%
YuiJsMinifier	YUI JS Compressor for .Net 2.2.0.0	28.8 KB	53.47%	10.0 KB	40.83%
ClosureLocalJsMinifier	Closure Compiler Application from 04/11/2013 (Simple mode)	28.1 KB	54.60%	9.7 KB	42.60%
MicrosoftAjaxJsMinifier	Microsoft Ajax JS Minifier 4.92	28.3 KB	54.28%	9.8 KB	42.01%
UglifyJsMinifier	UglifyJS 2.3.6	28.3 KB	54.28%	9.8 KB	42.01%

As expected, the 1st place was taken by the minimizer Closure Compiler from Google . It should also be noted that in Advanced mode you can achieve even better results.

As with the CSS minimization of Microsoft Ajax JS Minifier bypassed YUI JS Compressor for .Net. In addition, when compressing the bootstrap.js file, Microsoft Ajax JS Minifier and UglifyJS showed the same result and both took 2nd place.

The oldest minimizers JSMin and Packer showed the worst results. In addition, the code minimized by the Packer contained errors.

findings

Of course, the search giants Yandex and Google won the battle of minimizers.

But Microsoft didn’t sit back: although Ron Logan’s team hasn’t released a stable version of WebGrease Semantic CSS Minifier yet, they were able to raise Microsoft Ajax Minifier to a whole new level.

UglifyJS can still be considered the No. 2 JS minimizer in the world.

Generally, if you look objectively, then all modern minimization algorithms, having gone a long way of evolution, at the moment have almost the same degree of compression.

Poll

In conclusion, I suggest you take part in the survey: