goalsmashers / css-minification-benchmark Goto Github PK

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.

In some tests --total undefined:

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

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

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!

Example is 960.css size.

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

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.

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

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.

@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.

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

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

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

Current release is 2.1.0, but demo page uses 1.4.3.

/cc @ben-eb

Add more frameworks, and remove some of the ancient ones

Should make the report much cleaner.

Refs #3 (comment)

5 out of the 11 minification engines should be updated.

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

@jakubpawlowicz: how about dropping more-css?

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

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.

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

@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

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?

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

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

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.

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?

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

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

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

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

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?

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

Broken in 27eccf2