CSS minifiers do not make a big difference after compression using brotli or gzip.
Benchmark results:
| name | minified | gzip | brotli | duration (speed) |
|---|---|---|---|---|
| (none) | - | -86.4% | -89.6% | - |
| preprocessors | - | - | - | - |
| sass | -27.8% | -88.8% | -91.2% | 491ms (1629kB/s) |
| less | -28.1% | -88.8% | -91.2% | 1009ms (790kB/s) |
| minifiers | - | - | - | - |
| csso | -30.1% | -88.8% | -91.2% | 1939ms (393kB/s) |
| yui | -28.2% | -88.8% | -91.2% | 3141ms (229kB/s) |
| cssnano | -29.5% | -88.9% | -91.3% | 3905ms (204kB/s) |
| lean minifiers | - | - | - | - |
| csso* | -28.5% | -88.8% | -91.2% | 322ms (2741kB/s) |
| cssnano# | -27.3% | -88.7% | -91.1% | 327ms (2584kB/s) |
%: percentage reduction from original uncompressed size
*: with restructure: false
#: with cssnano-preset-lite
When using a minifier with gzip, about 86.4% of the saving is made by using gzip and about 2.4% by using the minifier.
When using a minifier with brotli, about 89.6% of the saving is made by using brotli and about 1.6% by using the minifier.
In fact, switching compression from gzip to brotli compression is a more effective (3.2%) way of reducing your over the wire size and speed.
CSS minifiers do help make the over the wire CSS smaller, but the benchmarks suggest that any more sophisticated optimizations beyond simply removing whitespace and comments are excessive and may lead to slower builds.
If you are already using sass or less, enable compressed output to save some bytes, but it’s probably unwise to add a minifier unless you plan to disable some optimizations.
The largest improvements to be made are by switching to use brotli compression instead of gzip (or from uncompressed to gzip/brotli).
Full results and source code: https://gist.github.com/tbjgolden/03e4f4a15c25ed10b6bf76122c352224