Don't use CSS minifiers with SASS

Tom Golden
Tom Golden

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


Soccer Explained for Americans

A refinement of a video of the same name

Reading every word on Wikipedia using Node.js

Making Node do exactly what it wasn't designed for (and do it well)