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

Логотипы модулей-минимизаторов из Bundle Transformer

Over the past, since the publication of the previous review , 3 months already managed to be updated almost all the considered minimization algorithms (except Packer). In addition, the Bundle transformer has a new Clean-css minimizer module - 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.css and bootstrap.js from 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
  3. preprocessors .
  4. As you know, Bundle Transformer minimizes each file individually and then combines the minimized code into one file. This mechanism is designed to prevent re-minimization of previously minimized files. Other similar libraries first merge the file code and then minimize this merged file. Therefore, for completeness, 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 compress equal to true ) http://lesscss.org
SassAndScssTranslator Sass 3.2.10 (compression mode corresponds to the settings of the source library with the option :style equal to compressed ) http://sass-lang.com

In order to use adapters, translators LessTranslator and SassAndScssTranslator as minimizers, you need to change the extension of the original files on the CSS, .less (and .scss respectively) and assign the configuration property useNativeMinification value is equal true .

As source files we will use:
  1. bootstrap.css from Twitter Bootstrap 3.0.0
  2. jquery-ui-1.10.3.custom.css from jQuery UI 1.10.3
  3. animate.css from Animate.css on 08/15/2013
  4. hint.css from Hint.css 1.3.0
  5. zocial.css from 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

Диаграмма эффективности алгоритмов CSS-минимизации

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 I was surprised by the newcomer - 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 @charset and 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 @charset were 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.

JS Code Minimizer Comparison


Compare the following JS code minimization algorithms:
Table 4. Information about 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.js from Twitter Bootstrap 3.0.0
  2. jquery-ui-1.10.3.custom.js from jQuery UI 1.10.3
  3. MicrosoftAjax.debug.js from Microsoft AJAX Framework 4.0.0.0
  4. knockout-2.3.0.debug.js from Knockout 2.3.0
  5. jsrender.js from JsRender 1.0.0-beta
  6. linq.js from LINQ for JavaScript 2.2.0.2
  7. moment.js from 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

Диаграмма эффективности алгоритмов JS-минимизации

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 white space 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 "fly in the ointment" in CSSO was received 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 conduct tests 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 he collected the latest version from the 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 " <BAD_TOKEN> "\\ "" at line 1658, column 19.
Was expecting one of:
    ";" ...
    "/" ...
    "=" ...
    "}" ...
    "," ...
    <S> ...
    <IMPORTANT_SYM> ...
    <ATKEYWORD> ...

        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.css and 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 .

Interview


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.

Only registered users can participate in the survey. Please come in.

What CSS minimization algorithm do you use in your projects?

  • 5.2% Clean-css 17
  • 4.0% CSS :: Minifier 13
  • 3.1% CssMin Joe Scylla ten
  • 15.6% CSSO (CSS Optimizer) 51
  • 2.1% CSSTidy 7
  • 0,0% Efficient stylesheet minifier by Mads Christensen 0
  • 5.5% Microsoft Ajax CSS Minifier 18
  • 1.8% WebGrease Semantic CSS Minifier 6
  • 21.7% YUI CSS Compressor 71
  • 19.9% LESS minimization tools 65
  • 12.2% Sass Minimization Tools 40
  • 8.9% Other 29th

What JavaScript minimization algorithm do you use in your projects?

  • 25.3% Closure compiler 91
  • 0,0% Dojo shrinksafe 0
  • 1.4% JavaScript :: Minifier five
  • 7.8% Jsmin 28
  • 6.7% Microsoft Ajax JS Minifier 24
  • 2.2% Packer 8
  • 33.1% UglifyJS 119
  • 15.0% YUI JS Compressor 54
  • 8.6% Other 31