goalsmashers / css-minification-benchmark

A comparison of CSS minifiers for node.js

What is css-minification-benchmark?

A comparison of CSS minification engines.

FAQ

Which engines are covered?

• clean-css
• cssnano
• csso
• esbuild

How can I see the results?

Clone the repository, install the dependencies with npm install and then run node ./bin/bench.js. That's it!

If you prefer to see results without cloning the repo here are the most recent ones.

How can I generate the html report?

Just run node ./bin/bench.js --html > report.html

How can I test my CSS file?

Just copy your file to the data directory (make sure the filename ends with .css) and re-run the benchmark.

How can I add a new minifier to the list?

• add it to package.json as a devDependency
• run npm install
• require it in lib/minify.js and add it to minifiers hash
• run npm run bench
• add it to this file in "Which engines are covered?" section above
• send a PR (if you wish to have it included)

How can I compare a subset of minifiers?

Just run node ./bin/bench.js --only csso,cssnano (it's turned into /.*(csso|cssnano).*/ regex)

Can I get the compressed gzip size as well?

Run node ./bin/bench.js --gzip to measure the gzip size instead of the regular file size.

License

css-minification-benchmark is released under the MIT License.

css-minification-benchmark's Issues

Fix CLI table header

Broken in 27eccf2

---

---

New CSS minifier: miniMinifier

Hello, I'd like to add my css minifier to the list, but sadly it's not node based. it's just an experiment (I tried to make a minifier as short as possible), but it has very interesting results:

given a string to minify "str", just run:

for(i=9;i--;)str=str.replace(/^\s|\s$|\/\*[^]*?\*\/|\s*;*([^\:\w.#\x27"\s*-])\s*|(:) /g,"$1$2")

(removes comments, whitespaces and semicolons)

or a little more complete:

for(i=9;i--;)str=str.replace(/([^#\d\w\(._\x27"-])((0)[a-z%]+|0(\.))|^\s|\s$|\/\*[^]*?\*\/|\s*;*([^\:\w.#)\x27"\s*-])\s*|\s(\))|(:) |[^}]*{}/gi,"$1$3$4$5$6$7").replace(/rgb\((\d+),(\d+),(\d+)\)|#[a-f0-9]{6}/gi,function(a,c,d,b){if(b)for(i in a="#",p=[c,d,b])a+=("0"+parseInt(p[i]).toString(16)).slice(-2);return(p=a[2]+a[4]+a[6])==a[1]+a[3]+a[5]?"#"+p:a})

(removes comments, whitespaces and semicolons, leading zeros, units after zero, empty rules, converts rgb colors to hex and preserve ie8 compatibility)

You'll find more info, demo and test files on: http://xem.github.io/miniMinifier/css/

If someone can help me convert this / those functions in node, that would be very nice.
(I don't know how to do it yet ^^)

Thanks!

Mention `--html` in README.md

Use a different color when values are the same

Example is 960.css size.

Add a table comparing gzip numbers

Improve results readiness

Expressing the variation in percent would greatly improve results readiness (like jsperf.com)

Add a "File" `th`

Or something like that... Maybe "File (size)" will be better.

css-minification-benchmark not available on npmjs.com

Hi,

css-minification-benchmark is not installable via: npm install -g css-minification-benchmark.

Could you describe installation procedure or upload this package to NPM?

Separate tables for time and size

Refs #3 (comment)

Add parcel-css

A WIP CSS parser, transformer, and minifier written in Rust.

https://github.com/parcel-bundler/parcel-css

Clean up data used

@GoalSmashers: using already minified CSS like facebook, youtube etc doesn't show the real improvements.

I suggest we remove those and add better cases in their place.

Update `csso` to v5

[email protected] was released: https://github.com/css/csso/releases/tag/v5.0.0

+ tdewolff/minify (GoLang)

https://github.com/tdewolff/minify
Go is often more used by more sys-admin types (Docker, CloudFlare, etc), but I think it may be better than Node for build tools, since Go runs almost as fast C++, & is easy to install/build.

Switch to GitHub Actions

@jakubpawlowicz can you please enable GitHub Actions in the repo?

--total overflow table

In some tests --total undefined:

      activeMinifiers.forEach(function(minifier) {
        minifier.total = storage.total(minifier.name);
      });

Add date to the test page

It would be good to know at which date the tests were created.
Right now I have no way to actually know if he comparison table was made far in the past or recently, because It is very tedious to track down each package version and compare it to the the benchmark's one. This will provide a very basic way to know if the tests are still relevant or not.

Add brotli-size

Link to each CSS file on the repo

Add host machine info in the benchmark results

CPU (cores etc), OS, Node.js version

Use `background-color` for highlighting

Add info below table

E.g. I think that most grunt-contrib-cssmin users don't know that it uses clean-css. It would make sense to provide this and related info below the table, so that visitors can have an immediate (broad) understanding of in which projects these minifiers are used.

Respect the OS line endings

results.html always has LF line endings which is causing issues on Windows.

Can't we use writeFileSync or something similar to write results.html?

Update minification engines

5 out of the 11 minification engines should be updated.

Engine	Using Version	Latest Version (2017-11)	Needs update?
clean-css	3.4.28	4.1.9	✔️
crass	0.7.12	0.11.1	✔️
css-condense	0.1.1	0.1.1
cssnano	3.7.7	3.10.0	✔️
csso	2.0.0	3.3.1	✔️
cssshrink	0.0.5	0.0.5
csswring	4.2.3	6.0.1	✔️
more-css	0.12.0	0.12.0
ncss	1.1.1	1.1.1
sqwish	0.2.2	0.2.2
ycssmin	1.0.1	1.0.1

Enable `--total` by default

Add table sorting

When we have the tables separated, this should improve usability.

We can use https://github.com/Mottie/tablesorter

Remove q and use native promises

update cssnano to 3.2.0

Being built on postcss, I'm guessing that this library will get faster/better and would like to keep track of its performance progress.

Move index.html into docs

@jakubpawlowicz I'll make a PR but you will need to change the repo setting to use the master/docs folder.

Then I will add a .nojekyll file and this way we separate code and docs. The default branch should be master then, and gh-pages can be deleted.

I'll make a PR and ping you to make the changes

Add compilation duration

It would be great to have the compilation duration too.
We could have big differences there...

Make gzip default

Also, perhaps output a tests-no-gzip.html page too

Nuke unmaintained packages

@jakubpawlowicz: how about dropping more-css?

update README

The "What are the results?" section needs updating because now more-css is winning almost every size comparison.

Move `background-color:#eee` to `<style>`

Should make the report much cleaner.

specify colors dependency following semver

It's not a good practice to use * because as you know things can break :P

Add/clean up test data

Add more frameworks, and remove some of the ancient ones

Update cssnano

Current release is 2.1.0, but demo page uses 1.4.3.

/cc @ben-eb

Add Github Pages URL to the repository description

I'd like to quickly jump to https://goalsmashers.github.io/css-minification-benchmark/.

Link to results not showing results

In the readme, there's a link that says:

If you prefer to see results without cloning the repo here are the most recent ones.

I suppose that link is supposed to show us the table that's in index.html. It just shows the same Readme, but without the files header.

Save results to an external file

I think we should improve the data generation and not generate the index.html file directly.

A few ideas for implementation:

1. Use XHR and load the bench data
2. Inline the data via Jekyll includes; maybe in an array or something

Either way, this should allow us to do more on the frontend part, add a GitHub ribbon maybe, add more info about the system the bench last run, add the gzip bench too and so on.

Create a gh-pages for the results

Since GitHub has this very useful feature, I think we should use it in this case.

It should be pretty easy to set up things; just rename the master branch to gh-pages.

Or alternatively, we could make a gh-pages branch in clean-css' repository. I think this makes more sense and there isn't any need for a separate repository.

What do you think @GoalSmashers?

Normalize data

Restore the data files to their original state without touching any comments.

Mention in readme that we use the default options and as such some optimizers might keep the comments some not. Alternatively, we should keep only the important comments in clean-css which should match what csso, cssnano and csswring do by default. I'm leaning towards the second solution.

/CC @jakubpawlowicz