First of all, to find out what
mincss is read this blog post which explains what the heck this new Python tool is.
My personal website is an ideal candidate for using
mincss because it uses an un-customized Bootstrap CSS which weighs over 80Kb (minified) and on every page hit, the rendered HTML is served directly from memcache so dynamic slowness is not a problem. With that, what I can do is run
mincss just before the rendered (from Django) output HTML is stored in memcache. Also, what I can do is take ALL inline
style blocks and all
link tags and combine them into one big inline
style block. That means that I can reduce any additional HTTP connections needed down to zero! Remember, "Minimize HTTP Requests" is the number one web performance optimization rule.
Voila! One HTTP request less and 74Kb less!
Now, as if that wasn't good enough, let's now take into account that the browser won't start rendering the page until the HTML and ALL CSS is "downloaded" and parsed. Without further ado, let's look at how much faster this is now:
How cool is that! The "Start Render" event is fired after 0.4 seconds instead of 2 seconds!
Note how the "Content Download" isn't really changing. That's because no matter what the CSS is, there's still a tonne of images yet to download.
window.onload that creates little permalink links into the document and the CSS it needs is protected thanks to the
/* no mincss */ trick as you can see here.
The code that actually implements
mincss here is still very rough and is going to need some more polishing up until I publish it further.
Anyway, I'm really pleased with the results. I'm going to tune the implementation a bit further and eventually apply this to all pages here on my blog. Yes, I understand that the CSS, if implemented as a
, can be reused thanks to the browser's cache but visitors of my site rarely check out more than one page. In fact, the number of "pages per visit" on my blog is 1.17 according to Google Analytics. Even if this number was bigger I still think it would be a significant web performance boost.
Steve Souders points out a flaw in the test. See his full comment below. Basically, what appears to happen in the first report, IE8 downlads the file
c98c3dfc8525.css twice even though it returns as a 200 the first time. No wonder that delays the "Start Render" time.
So, I re-ran the test with Firefox instead (still from the US East coast):
That still shows a performance boost from 1.4 seconds down to 0.6 seconds when run using Firefox.
Perhaps it's a bug in Webpagetest or perhaps it's simply how IE8 works. In a sense it "simulates" the advantages of reducing the dependency on extra HTTP requests.