perf: self-host the webfonts, drop the render-blocking font chain - #4
Merged
Conversation
Every page pulled three families from fonts.googleapis.com, which meant a stylesheet request to one origin and then the font files from a second before any text could paint. Lighthouse measured that chain at 259 ms of critical path and around 550 ms of render-blocking. The same faces now ship from this origin: - no fonts.googleapis.com or fonts.gstatic.com request, so two DNS and TLS handshakes and the whole request chain go away. The preconnect hints they needed go with them - the two faces used above the fold are preloaded, so they start with the HTML rather than after the stylesheet resolves - 84.9 KiB of latin webfont down from 131 KiB The byte saving comes from two things. Four of the nine requested weight variants were never used anywhere in the CSS (Bricolage 600, DM Mono 500, DM Sans 500 and 600). And Bricolage's optical-size axis is dropped, which halves the file, nothing in the CSS sets font-optical-sizing so it was carrying an axis the site never asked for. Variable fonts, so one file per family covers its whole weight range. latin-ext is declared but stays lazy behind unicode-range, only fetched when a character needs it. Cache lifetime, the other Lighthouse item, is not addressable here: GitHub Pages fixes its own Cache-Control and offers no way to set it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Lighthouse flagged ~550 ms of render-blocking and a 259 ms critical path on aether-lang.dev. Both were the Google Fonts chain: every page requested a stylesheet from
fonts.googleapis.com, and only once that resolved could four woff2 files start downloading fromfonts.gstatic.com. Two extra origins, two DNS+TLS handshakes, and nothing could paint until it finished.preconnectwas already in place and it was still 259 ms, because preconnect cannot fix chaining.The same faces now ship from this origin.
What changed
fonts.googleapis.com/fonts.gstatic.comrequest at all; the preconnect hints they needed are gone with themWhere the bytes went
Two independent findings, both from reading the CSS rather than guessing:
400,700and800. Bricolage 600, DM Mono 500, and DM Sans 500 and 600 were downloaded and never applied.font-optical-sizingorfont-variation-settingsanywhere, so theopsz 12..96axis was dead weight: 75.1 KiB with it, 40.3 KiB without.These are variable fonts, so one file per family covers its whole weight range.
latin-extis declared but stays lazy behindunicode-range, only fetched if a character needs it, so it costs repo size and not load time.DM Mono bold is unchanged: that family has no 700, so it was already being synthesized.
Not fixed, and why
The cache-lifetime item is not addressable in this repo.
static/CNAMEisaether-lang.dev, so the site is served by GitHub Pages, which fixes its ownCache-Controland exposes no way to configure it (fly.tomlis only the playground backend). The routes would be putting a CDN in front or moving hosting, neither worth it for 7 KiB.The forced-reflow item (44 ms) is reported as
[sin asignación]with no attributed source, so there is nothing to act on yet.Testing
./test.shpasses in full. Served the tree locally and confirmed all three font files return 200 at the paths the stylesheet resolves to, the stylesheet carries its 10@font-faceblocks, and no page makes an external font request. Theurl()values are CSS-relative, so they resolve identically from/index.htmland from/Docs/*.html.60 pages plus the
gendocs.pytemplate, so regenerated docs keep the change.