minimalcss 0.6.2 now strips all unused font faces

22 January 2018   0 comments   Web development, Javascript, Node

minimalcss is a Node API and cli app to analyze the minimal CSS needed for initial load. One of it's killer features is that all CSS parsing is done the "proper way". Meaning, it's reduced down to an AST that can be iterated over, mutated and serialized back to CSS as a string.

Thanks to this, together with my contributors @stereobooster and @lahmatiy, minimalcss can now figure out which @font-face rules are redundant and can be "safely" removed. It can make a big difference on web performance. Either because it prevents expensive network requests of downloading some or downloading base64 encoded fonts.

For example, this very blog uses Semantic UI which is a wonderful CSS framework. But it's quite expensive and contains a bunch of base64 encoded fonts. The Ratings module uses a @font-face rule that weighes about 15KB.

Sure, you don't have to download and insert semanticui.min.css in your HTML but it's just sooo convenient. Especially when there's tools like minimalcss that allows you to be "lazy" but get that perfect first load web performance thing.
So, the CSS when doing a search looks like this:

126KB of CSS (gzipped) transferred and 827KB of CSS parsed.

Let's run this through minimalcss instead:

$ minimalcss.js --verbose -o /tmp/ ""
$ ls -lh /tmp/
-rw-r--r--  1 peterbe  wheel    27K Jan 22 09:59 /tmp/
$ head -n 14 /tmp/
Generated 2018-01-22T14:59:05.871Z by minimalcss.
Took 4.43 seconds to generate 26.85 KB of CSS.
Based on 3 stylesheets totalling 827.01 KB.
Options: {
  "urls": [
  "debug": false,
  "loadimages": false,
  "withoutjavascript": false,
  "viewport": null

And let's simulate it being gzipped:

$ gzip /tmp/
$ ls -lh /tmp/
-rw-r--r--  1 peterbe  wheel   6.0K Jan 22 09:59 /tmp/

Wow! Instead of downloading 27KB you only need 6KB. CSS parsing isn't as expensive as JavaScript parsing but it's nevertheless a saving of 827KB - 27KB = 800KB of CSS for the browser to not have to worry about. That's awesome!

By the way, the produced minimal CSS contains a lot of license preamble as left over from the fact that the semanticui.min.css is made up of components. See the gist itself.
Out of the total size of 27KB (uncompressed) 8KB is just the license preambles. minimalcss does not attempt to touch that when it minifies but you could easily add your own little tooling to re-write it, since there's a lot of repetition and save another ~7KB. However, all that repetition compresses well so it might not be worth it.


Thank you for posting a comment

Your email will never ever be published

Related posts

Conditional aggregation in Django 2.0 12 January 2018
Even more aggressively trying to preload your next page load 22 January 2018
Related by Keyword:
CSS selector simplifier regular expression in JavaScript 20 December 2017
Ultrafast loading of CSS 01 September 2017
CSS Bloat Comparison 03 June 2016
How to no-mincss links with django-pipeline 03 February 2016
django-semanticui-form 14 September 2015
Related by Text:
HTML Tree on Hacker News 18 May 2014
YouTube - Nigella's XXXmas 19 December 2008
How and why to use django-mongokit (aka. Django to MongoDB) 08 March 2010
How to track Google Analytics pageviews on non-web requests (with Python) 03 May 2016
hashin 0.7.0 and multiple packages 30 August 2016