Description
The docs are using fontawesome for icons. But only a 2 of 705 icons are actually used of the 95-72kb font download (.woff
and .woff2
).
Creating an optimal subset of the font, to include only the exact icons that are in use, would cut the download down to ~680 bytes (.woff2
), which is in the realm of inlineability.
I've been working with @papandreou to attempt a 100% automation of creating such subsets based on static analysis of the page. The tool is called subfont and the jekyll based static generation approach that the docs are taking should fit well with the static analysis approach.
Would you be interested in a PR that adds subfont to your tool chain? It would be a bit more work than just plugging it at the end because of the multiple file references in _headers
, sw.js
, appcache and so on, but I think it should be doable.
Some highlights from our initial experiments:
lodash.com without scripts
lodash/index.html: 1 font (1 variant) in use, 77.2 kB total. Created subsets: 680 B total
FontAwesome:
400 : 3/705 codepoints used, 77.2 kB (woff2) => 680 B (woff2)
Total savings: 76.5 kB
We are hanging out in https://gitter.im/assetgraph/assetgraph if you are interested to have a chat about it