Top 7 CSS minifiers comparison
What is minification?
An earlier post dicusses minifying resources (e.g. CSS, JS, HTML) transferred from server to client (browser) to speed things up. If you are familiar with the concept, the following text could help you with choosing a suitable online CSS minifier.
TOP 7 CSS minifiers are tested in two scenarios - on a very basic and familiar reset CSS and on a widespread complex Wordpress CSS.
The 7 CSS minifiers
The following list is same as in the earlier post about miniying resources. It consist of first 7 minifiers found when googling for "CSS minifiers".
- CSS Minifier - https://cssminifier.com/
- Minify - JavaScript and CSS minifier - https://www.minifier.org/
- CSS Compressor - https://csscompressor.com/
- Dans’ Tools CSS Minify - https://www.cleancss.com/css-minify/
- CSS Minifier - http://www.css-minifier.com/
- Gift of Speed CSS compressor - https://www.giftofspeed.com/css-compressor/
- CSS Minifer - http://minifycode.com/css-minifier/
CSS minifier comparison #1:
Eric Meyer’s “Reset CSS” 2.0
What's this?
Browsers feature a basic set of CSS to style pages. Unless you override these with your own, or with a reset css, they get applied. For example, to margins and padding of heading elements. Since each browser has a slightly different default stylesheet, a page may look different in different browsers.
In general, a reset css is a stylesheet used to override browsers’ built-in styles. In other words, to unify differences between browsers.
Eric Meyer’s “Reset CSS” 2.0 is likely the most popular reset.css. Other can be found here: https://cssreset.com/.
Why test on Eric Meyer’s “Reset CSS” 2.0?
- well-known, used a lot
- basic enough to clearly point out major flaws in minifiers
Results of comparison #1:
The input is 1139 bytes.
Same results for 5 out of the seven minifiers is not surprising - 773 bytes.
Dans’ Tools CSS Minify (#4) failed to remove unnecessary characters. First minifier on the list deems reseting font size to 100% excessive. This is how they all did:
| # | CSS Minifier | Output bytes | Valid by w3.org? | Comments |
|---|---|---|---|---|
| 1 | cssminifier.com | 758 | yes | Omits "font-size:100%" rule for majority of reset elements. |
| 2 | www.minifier.org | 773 | yes | |
| 3 | csscompressor.com | 773 | yes | |
| 4 | cleancss.com | 897 | yes | Fails to remove unnecessary spaces and semicolons. |
| 5 | css-minifier.com | 773 | yes | Minifier identical to CSS Compressor (#3) |
| 6 | giftofspeed.com | 773 | yes | |
| 7 | minifycode.com | 773 | yes |
CSS minifier comparison #2:Gillion Wordpress Theme
Why test on this?
Wordpress makes one third of all the internets. Gillion is one of the most popular themes for Wordpress in 2018. Also, it a good sample, since it is exceptionally heavy, contains a lot of traps, including Microsoft-exclusive filters. 883 162 bytes of CSS (no kidding) to stuff your browser with is blasphemy. Amazingly, it contains only 12 unimportant errors, such as "auto is not a line-height value" and the validator mainly complains (1645 times) about vendor extensions. It seems somewhat compact already.
Results of comparison #2:
| # | CSS Minifier | Output rules | Output bytes | Valid by w3.org? | Comments |
|---|---|---|---|---|---|
| 1 | cssminifier.com | 7 632 | 869 734 | Same errors, warnings down by 38. | Looks ok. |
| 2 | www.minifier.org | 7 814 | 881 609 | Same errors and warnings as source. | Looks ok. Removes /*!important comments*/. |
| 3 | csscompressor.com | 7 808 | 880 904 | Same errors, 4 more warnings. | Looks ok. Removes /*!important comments*/. |
| 4 | cleancss.com | 7 814 | 882 403 | Same errors and warnings as source. | Looks ok. Removes /*!important comments*/. Great tips on source CSS. |
| 5 | css-minifier.com | 7 808 | 880 904 | Minifier identical to CSS Compressor. | |
| 6 | giftofspeed.com | 7 814 | 882 214 | 4 more errors, same warnings. | Has combined dimension rules into an invalid one: "50vw+50% - 6px". Looks ok. |
| 7 | minifycode.com | 3 712 | 503 701 | Layout fell apart. |
The input was 883 162 bytes and 7814 rules.
All minifiers took of some bytes, none have performed the same, except for #3 and #5, which are the same thing on different domains. Since it is nearly impossible to verify if all rules and their declarations were preserved correctly, having the same number of errors, warnings of rules as source was appreciated (green cells in table above).
Reducing rulecount might mean the minifier did an extra job by combining rules, but there is no good way to check for consistency in an input so large. However, reduction by 184 (#1) in css minifier seems a bit suspicious when it comes together with reduction of warnings, which indicates that some rules might have been omitted.
CSS minifier comparison overall results
- #2 and #4 have produced the same number of rules, errors and warnings.
- #2 (www.minifier.org) did a slightly better job in cutting of bytes, and so it becomes the weapon of choice.
- #4 (cleancss.com) however, even though it failed the first test, did pretty well in the second one and is the go-to minifier for checking your source.