MinCSS is amazing

I had this issue open in the bug tracker for Nikola (my static site generator) for a long time: "Add mincss support".

Well, no, it doesn't have it yet, but I did some research on whether it would be worth adding. And boy, mincss impressed the heck out of me.

You see, Nikola's themes tend to use unadultered bootstrap, which means they carry a large number of things that are not used in their CSS. Besides, it uses several stylesheets from docutils, pygments, and more.

What mincss does is examine your HTML and your CSS, and remove all the unused CSS. So, I wrote a script that examines the Nikola output and overwrites the CSS files with the minimal things that are actually needed there.

And the result?

Here is the before/after for each CSS file in Nikola's demo site:

bootstrap-responsive.min.css  16849  3251
bootstrap.min.css            106059 14737
code.css                       3670  2114
colorbox.css                   6457   774
rst.css                        6559  2581
theme.css                      1287  1061
                             140881 24518

But wait, Nikola supports bundling all those files into a single large CSS file to avoid network requests (using webassets). Does it work in that case too?

Well yes:

all-nocdn.css                167457 29496

But that is not all. The mincss files are not minified. Passing all-nocdn.css through Yui-compressor shrinks it further to 20599 bytes. Which, gzipped, is a paltry 4801 bytes. That means the complete styling of the whole site is a single CSS file less than 5KB in size.

That, is impressive.


Comments powered by Disqus