Optimization: Ensure text remains visible during webfont load

[rfultz]

Background

Looking to optimize the site's performance and that of the homepage specifically, the Lighthouse tool in Chromium browsers has made some suggestions. Some of these will have repercussions throughout the app so we're going to make them their own tickets.

Recommendation: Ensure text remains visible during webfont load

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. details

Overview

We could add font-display: swap; to each font rule so text display doesn't have to wait until all of our fonts are loaded. Especially beneficial on the first page of a user's visit to our site in the last month or two before any fonts have ever been loaded. Irrelevant after the fonts have been loaded once.

Benefit (the 80 of 80/20)

Noticeable for first-visit site visitors
Irrelevant for everyone else

Effort (the 20 of 80/20)

Minimal

Complications

• May cause text to momentarily jitter if the connection is slow enough. As-is, the text wouldn't display at all. Our fonts are close enough to typical system fonts that it may not be an issue.
• Make sure major browsers aren't negatively impacted by any of these changes (Chrome, Safari, Firefox. IE?)

Related tickets

• Preload key requests
• Remove unused JavaScript
• Remove unused CSS
• Preconnect to required origins
• Eliminate render-blocking resources
• Reduce the impact of third-party code
• Does not use passive listeners to improve scrolling performance
• Image elements do not have explicit width and height
• Serve static assets with an efficient cache policy
• Minimize main-thread work
• Avoid an excessive DOM size
• Reduce JavaScript execution time
• Avoid enormous network payloads
• [aria-hidden="true"] elements contain focusable descendents
• Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children
• [aria-*] attributes do not have valid values
• ARIA IDs are not unique
• Lists do not contain only
• elements and script supporting elements (<script> and )
• [user-scalable="no"] is used in the element or the [maximum-scale] attribute is less than 5
• Links to cross-origin destinations are unsafe
• Serves images with low resolution