Inline critical font - #16031
Merged
Merged
Conversation
Merged
Contributor
Author
|
Manually tested across browsers. Merging now to unblock related performance-testing, but will plan on followup changes for any feedback. |
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
2 participants
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.
This PR introduces a 'critical font' feature using the CSS Font Loading API (supported in most non-IE browsers). This inlines a tiny (~5k gzipped), 'critical' subset of our font (
[ 0-9A-Za-z]glyphs in a single weight/style) that renders immediately as soon as the page is loaded. The full font (all glyphs, weights/styles, ~100k gzipped) is lazy-loaded, and swapped in once it fully loads.This is a calculated tradeoff: the downside is that there's a slight shift in the text once the full font is fully loaded, but the upside is that the page renders sooner because it's not blocked waiting for the full font to load first.
Here's what that shift looks like:
The only visible shifts should be in bold-weight or italic styles (since the critical-font is only a single weight/style), and in punctuation glyphs (or other symbols not present in the critical font), which overall should be relatively minor.
Because of the slight impact on user-experience, the feature will apply only to select pages (marked with
critical_font: truein the Pegasus header, currently only the homepage), and only for English-language pages for now (to avoid inconsistent user-experience in languages relying more heavily on other glyphs).