Skip to main content

Ralsina.Me — Roberto Alsina's website

MinCSS is amazing

I had this is­sue open in the bug track­er for Niko­la (my stat­ic site gen­er­a­tor) for a long time: "Add minc­ss sup­port­".

Well, no, it does­n't have it yet, but I did some re­search on whether it would be worth adding. And boy, minc­ss im­pressed the heck out of me.

You see, Niko­la's themes tend to use unadul­tered boot­strap, which means they car­ry a large num­ber of things that are not used in their CSS. Be­sides, it us­es sev­er­al stylesheets from do­cu­til­s, pyg­ments, and more.

What minc­ss does is ex­am­ine your HTML and your CSS, and re­move all the un­used CSS. So, I wrote a script that ex­am­ines the Niko­la out­put and over­writes the CSS files with the min­i­mal things that are ac­tu­al­ly need­ed there.

And the re­sult?

Here is the be­fore/after for each CSS file in Niko­la's de­mo 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, Niko­la sup­ports bundling all those files in­to a sin­gle large CSS file to avoid net­work re­quests (us­ing we­bas­sets). Does it work in that case too?

Well yes:

all-nocdn.css                167457 29496

But that is not al­l. The minc­ss files are not mini­fied. Pass­ing al­l-nocd­n.c­ss through Yui-­com­pres­sor shrinks it fur­ther to 20599 bytes. Which, gzipped, is a pal­try 4801 bytes. That means the com­plete styling of the whole site is a sin­gle CSS file less than 5KB in size.

That, is im­pres­sive.

masklinn / 2013-06-19 20:17:

You could also check https://github.com/afrigger... it's more of a toy/demo, but who knows, it might do rather well


Contents © 2000-2020 Roberto Alsina