Subset fontawesome fonts #194
Conversation
|
This PR closes #191 |
|
🤯! Thank you! |
… are needed and nothing more
…, so we can wait for it
Munter
force-pushed
the
subset-fontawesome-fonts
branch
from
1ef664a
to
fd0225d
Compare
tools/subsetLocalFont.js
Outdated
| const getTemporaryFilePath = require('gettemporaryfilepath'); | ||
|
|
||
| require('promise.prototype.finally').shim(); | ||
|
|
||
| const allowedFormats = ['woff', 'woff2']; | ||
|
|
||
| const readFile = util.promisify(fs.readFile); | ||
| const execFile = util.promisify(childProcess.execFile); | ||
| const execFile = pify(childProcess.execFile); |
|
Rock! Thank you again @Munter! |
|
In my mesurements I saw some problems on the individual versions of the docs, which didn't preload anything other than lodash itself. Netlify apparently clobbers the |
|
It looks to me like all the preloads of the javascript is actually hurting the first paint performance. Is there a way those scripts could be moved out of the client hints? Is the javascript really so important as to override the browsers prioritization? |
|
Here's a performance comparison of the docs page before and after things branch: https://www.webpagetest.org/video/compare.php?tests=180809_Z9_7b995e5da2efc33ee296854297a5c8ab%2C180809_Q9_087f0a76614e24ca3e994c8b3552d38d&thumbSize=200&ival=1000&end=visual I can't explain what's happening with the extremely late font rendering. I even added font-display: swap; to trigger an immediate render as soon as the stylesheet comes down. |
jdalton
force-pushed
the
master
branch
4 times, most recently
from
11bf23d
to
4602653
Compare
This PR adds a script that will grep the source code for occurrences of font-awesome class names, then filter out unused selectors from the font-awesome stylesheet. With the remaining selectors it will figure out which codepoints from the font files are used and create an optimal subset of the font with only these glyphs. The whole thing gets written out to a stylesheet of about 2544 bytes, which gets appended to
main.css.So it's trading 7kb of CSS and 75kb of fonts, plus extra roundtrip latency with 2544 bytes that include the font as well.
The script requires the fontawesome files to have been downloaded, like the result of running
npm run build:vendor, and fits best in betweennpm run build:jekyllandnpm run build:site.In order to use this optimization fully there are still some changes needed, like the original fontawesome files not being included in
_config.ymlso they don't end up in all sorts of places. But I'm not sure how this impacts local development. I'll need some feedback to figure out how to correctly slot this into the existing workflowExample output: