Comparing the effectiveness of CSS and JavaScript minimizers (September 2013)

Over the past, since the publication of the previous review , 3 months already managed to be updated almost all of the considered minimization algorithms (except Packer). In addition, a new Clean-css minimizer module has appeared in Bundle Transformer - BundleTransformer.CleanCss .

In preparing this comparative review, the following wishes of readers were taken into account:

1. In the previous review as the source files used: bootstrap.cssand bootstrap.jsfrom Twitter Bootstrap 2.3.2 , because of what was low reliability of the results. In the new review, the sample size was increased: for comparison, 7 JS files and 5 CSS files from 10 popular Open Source projects were selected.
2. Now, a comparison of CSS minimizers also involves built-in minimization tools for the LESS and Sass preprocessors .
3. As you know, the Bundle Transformer minimizes each file individually and then combines the minimized code into one file. This mechanism is designed to prevent repeated minimization of previously minimized files. Other similar libraries first combine the file code and then minimize this combined file. Therefore, to complete the picture, we will make 2 comparisons: first, we compare the effectiveness of minimizers on files obtained by combining minimized code, and then on files obtained by minimizing the combined code of files.

As in the previous review, we will use Bundle Transformer modules to minimize files, and the YSlow extension to measure the size of received files .

CSS Minimizer Comparison

Compare the following CSS code minimization algorithms:

Table 1. Information about adapters and CSS code minimization algorithms

Adapter	Minimization algorithm	Source Library Site
YuiCssMinifier	YUI CSS Compressor for .Net 2.3.0.0	http://yuicompressor.codeplex.com
MicrosoftAjaxCssMinifier	Microsoft Ajax CSS Minifier 4.97	http://ajaxmin.codeplex.com
KryzhanovskyCssMinifier	CSSO 1.3.8	http://github.com/css/csso
WgCssMinifier	WebGrease Semantic CSS Minifier 1.5.2	http://webgrease.codeplex.com
CleanCssMinifier	Clean-css 1.1.1	http://github.com/GoalSmashers/clean-css
LessTranslator	LESS 1.4.2 (compression mode corresponds to the settings of the source library with the option compressequal to true)	http://lesscss.org
SassAndScssTranslator	Sass 3.2.10 (compression mode corresponds to the settings of the source library with the option :styleequal to compressed)	http://sass-lang.com

In order to use adapters, translators LessTranslatorand SassAndScssTranslatoras minimizers, you need to change the extension of the original files on the CSS, .less(and .scssrespectively) and assign the configuration property useNativeMinificationvalue is equal true.

As source files we will use:

1. bootstrap.cssfrom Twitter Bootstrap 3.0.0
2. jquery-ui-1.10.3.custom.cssfrom jQuery UI 1.10.3
3. animate.cssfrom Animate.css on 08/15/2013
4. hint.cssfrom Hint.css 1.3.0
5. zocial.cssfrom Zocial CSS social buttons from 12/02/2012

The combined file size is 296.2 KB, and after applying GZip-compression - 98.7 KB.

Table 2. The result of applying CSS minimization algorithms to each file individually

Adapter	Size after minimization, KB	Saving		Size after minimization with GZip compression, KB	Savings on GZip Compression
		in KB	in %		in KB	in %
YuiCssMinifier	239.7	56.5	19.07	79.9	18.8	19.05
MicrosoftAjaxCssMinifier	238.7	57.5	19.41	79.5	19.2	19.45
KryzhanovskyCssMinifier	234.1	62.1	20.97	78.0	20.7	20.97
WgCssMinifier	-	-	-	-	-	-
CleanCssMinifier	240.6	55.6	18.77	80.2	18.5	18.74
LessTranslator	240.0	56.2	18.97	80.0	18.7	18.95
SassAndScssTranslator	241.2	55.0	18.57	80,4	18.3	18.54

Table 3. The result of applying CSS minimization algorithms to a merged file

Adapter	Size after minimization, KB	Saving		Size after minimization with GZip compression, KB	Savings on GZip Compression
		in KB	in %		in KB	in %
YuiCssMinifier	239.7	56.5	19.07	79.9	18.8	19.05
MicrosoftAjaxCssMinifier	238.7	57.5	19.41	79.5	19.2	19.45
KryzhanovskyCssMinifier	232,4	63.8	21.54	77.4	21.3	21.58
WgCssMinifier	-	-	-	-	-	-
CleanCssMinifier	240.6	55.6	18.77	80.2	18.5	18.74
LessTranslator	240.0	56.2	18.97	80.0	18.7	18.95
SassAndScssTranslator	241.2	55.0	18.57	80,4	18.3	18.54

Fig. 1. Savings due to the use of CSS minimization algorithms (in percent)

The graph clearly shows that, like last time, the best result was shown by the CSSO minimizer (CSS Optimizer) from Yandex . But not without a fly in the ointment: an additional gain of 0.57% at a compression of the combined file was obtained by removing the two types of comments: /*! какой-нибудь текст */. As a rule, such comments contain information about the version of the library and its developers. CSSO leaves only the first such comment, and deletes the rest (see UPD2).

Microsoft Ajax CSS Minifier again showed a good result compared to its main competitor - YUI CSS Compressor for .Net.

Most of all, the newcomer surprised me - Clean-css from Goal Smashers!. From the CSS minimizer so popular in the Node.js community (Clean-css is used by the grunt-contrib-cssmin package ) I expected a greater degree of compression. In terms of minimization efficiency, it is located between the built-in minimizers of the LESS and Sass preprocessors.

The new version of the structural minimizer from Microsoft - WebGrease Semantic CSS Minifier still contains critical errors:

1. Cannot process directive @charsetand rule @-o-keyframes.
2. Resets fractional values ​​that are less than one.

Therefore, WebGrease Semantic CSS Minifier is again out of the fight.

It is practically not visible from the graph that the files obtained by minimizing the file with the combined code (the exception is the file processed using CSSO) are slightly smaller in size than the files collected from separately minimized files. The smaller size of such files is due to two reasons:

1. Extra line breaks that separate the code of individual files have been removed.
2. Several directives @charsetwere combined into one.

Therefore, we can conclude: that minimizing the file with the combined code practically does not give a gain in the file size.

Comparing JS Code Minimizers

Compare the following JS code minimization algorithms:

Table 4. Information on adapters and JS code minimization algorithms

Adapter	Minimization algorithm	Source Library Site
CrockfordJsMinifier	JSMin on 03/29/2013	http://github.com/douglascrockford/JSMin
YuiJsMinifier	YUI JS Compressor for .Net 2.3.0.0	http://yuicompressor.codeplex.com
ClosureLocalJsMinifier	Closure Compiler Application from 08/26/2013 (mode Simple)	http://developers.google.com/closure/compiler/docs/gettingstarted_app
MicrosoftAjaxJsMinifier	Microsoft Ajax JS Minifier 4.97	http://ajaxmin.codeplex.com
UglifyJsMinifier	UglifyJS 2.4.0	http://github.com/mishoo/UglifyJS2

If you have already noticed, then in the above list there is no adapter minimizer EdwardsJsMinifier. Since the minimization algorithm supported by him, Packer 3.0 has not changed since 2007, I decided not to include it in this review.

As source files we will use:

1. bootstrap.jsfrom Twitter Bootstrap 3.0.0
2. jquery-ui-1.10.3.custom.jsfrom jQuery UI 1.10.3
3. MicrosoftAjax.debug.jsfrom Microsoft AJAX Framework 4.0.0.0
4. knockout-2.3.0.debug.jsfrom Knockout 2.3.0
5. jsrender.jsfrom JsRender 1.0.0-beta
6. linq.jsfrom LINQ for JavaScript 2.2.0.2
7. moment.jsfrom Moment.js 2.1.0

The combined file size is 1218.9 KB, and after applying GZip compression - 406.3 KB.

Table 5. The result of applying JS-minimization algorithms to each file individually

Adapter	Size after minimization, KB	Saving		Size after minimization with GZip compression, KB	Savings on GZip Compression
		in KB	in %		in KB	in %
CrockfordJsMinifier	713.5	505.4	41.46	237.8	168.5	41.47
YuiJsMinifier	593.0	625.9	51.35	197.6	208.7	51.37
ClosureLocalJsMinifier	525.4	693.5	56.90	175.1	231.2	56.90
MicrosoftAjaxJsMinifier	527.7	691.2	56.71	175.9	230,4	56.71
UglifyJsMinifier	531.1	687.8	56.43	177.0	229.3	56.44

Table 6. The result of applying JS-minimization algorithms to the combined file

Adapter	Size after minimization, KB	Saving		Size after minimization with GZip compression, KB	Savings on GZip Compression
		in KB	in %		in KB	in %
CrockfordJsMinifier	713.4	505.5	41.47	237.8	168.5	41.47
YuiJsMinifier	593.0	625.9	51.35	197.6	208.7	51.37
ClosureLocalJsMinifier	525.3	693.6	56.90	175.1	231.2	56.90
MicrosoftAjaxJsMinifier	527.7	691.2	56.71	175.9	230,4	56.71
UglifyJsMinifier	533.1	685.8	56.26	177.7	228.6	56.26

Fig. 2. Savings due to the use of JS-minimization algorithms (in percent)

From the above data it is clear that the Google Closure Compiler minimizer is still in first place.

Microsoft Ajax JS Minifier this time overtook UglifyJS and rightfully took second place.

In general, UglifyJS surprised me very much with the fact that while minimizing the file with the combined code, the size of the resulting file not only did not decrease, but rather increased. Which speaks of some flaws in the algorithm.

YUI JS Compressor for .Net is far behind the first three minimizers, which indicates the obsolescence of its algorithm.

Despite the fact that JSMin is still developing, the principles laid down in it have remained the same: no interference with the script logic, only the removal of comments and whitespace characters. Therefore, in this review, JSMin is not even a participant, but acts as a lower boundary.

As in the case of CSS minimizers, we got very little gain from minimizing the file with the combined code.

Conclusion

Like last time, the battle of the minimizers was won by the search giants Yandex and Google. It’s nice to know that the best CSS minimizer was created in a Russian company.

Despite serious problems with the WebGrease Semantic CSS Minifier, Microsoft has made significant progress in developing the Microsoft Ajax Minifier family of minimizers.

All source and minimized files are available at https://www.dropbox.com/s/k232cloh87sn9pr/css-and-js-minifiers-sep-2013-files.zip .

UPD1: Redid the graphs to display interest.

UPD2: Regarding the “fly in the ointment” CSSO received a comment from Sergey Kryzhanovsky(CSSO developer). Actually, this is not a flaw, but simply a feature of structural minimization: when you change the structure of the style sheet, such comments can separate from the code to which they refer and simply “hang” in the style sheet. Therefore, only the first comment is saved. Here the situation is similar to the similar situation with the Closure Compiler, which, when structurally minimizing the JS code, removes all comments at all.

UPD3: I tried to test with CSS minimizer Closure Stylesheets . First I tested the latest available version of the binary - closure-stylesheets-20111230.jar and got an error while minimizing the file bootstrap.css. Then I collected the latest version from source (commit 86bb800d79a3) and again received an error while minimizing the file bootstrap.css:

Compiler parsing error: Parse error in C:\!closure-stylesheets\bootstrap.css at line 1658 column 19:
  margin-top: 1px \9;
                  ^
com.google.common.css.compiler.ast.GssParserException: Parse error in C:\!closure-stylesheets\bootstrap.css at line 1658 column 19:
  margin-top: 1px \9;
                  ^
        at com.google.common.css.compiler.ast.GssParserCC.parse(GssParserCC.java:176)
        at com.google.common.css.compiler.ast.GssParser.parse(GssParser.java:46)
        at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.parseAndPrint(DefaultCommandLineCompiler.java:104)
        at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.compile(DefaultCommandLineCompiler.java:94)
        at com.google.common.css.compiler.commandline.DefaultCommandLineCompiler.execute(DefaultCommandLineCompiler.java:129)
        at com.google.common.css.compiler.commandline.ClosureCommandLineCompiler.executeJob(ClosureCommandLineCompiler.java:290)
        at com.google.common.css.compiler.commandline.ClosureCommandLineCompiler.main(ClosureCommandLineCompiler.java:356)
Caused by: com.google.common.css.compiler.ast.ParseException: Encountered "  "\\ "" at line 1658, column 19.
Was expecting one of:
    ";" ...
    "/" ...
    "=" ...
    "}" ...
    "," ...
     ...
     ...
     ...
        at com.google.common.css.compiler.ast.GssParserCC.generateParseException(GssParserCC.java:3756)
        at com.google.common.css.compiler.ast.GssParserCC.jj_consume_token(GssParserCC.java:3635)
        at com.google.common.css.compiler.ast.GssParserCC.ruleSet(GssParserCC.java:464)
        at com.google.common.css.compiler.ast.GssParserCC.block(GssParserCC.java:2856)
        at com.google.common.css.compiler.ast.GssParserCC.start(GssParserCC.java:2903)
        at com.google.common.css.compiler.ast.GssParserCC.parse(GssParserCC.java:174)
        ... 6 more

In addition, he also tried to minimize jquery-ui-1.10.3.custom.cssand animate.css, and again received errors.

Therefore, Closure Stylesheets, like WebGrease Semantic CSS Minifier, cannot participate in the comparative tests of this review.

UPD4: Added a link to the archive with source and minimized files - https://www.dropbox.com/s/k232cloh87sn9pr/css-and-js-minifiers-sep-2013-files.zip .

Poll

At the end of the article I suggest you take part in the survey. If you did not find your minimizer in the list of answer options, then select the `Other` option, and then indicate in the comments its name and address of the developers site.