suggest font-display optional if font is preloaded, to reduce layout shift

Starting in Chrome 83, preloaded fonts with font-display: optional will result in no FOIT or layout shifts. See https://web.dev/preload-optional-fonts/

Lighthouse has two related audits on this:

uses-rel-preload recommends requests that should be, but currently aren’t, preloaded. This is based on a Lantern simulation.

font-display simply points out fonts that don’t define a font-display rule. Our docs suggest they do swap, but any value passes this audit.

To keep this audit simple, I suggest we only look at already preloaded fonts. If a preloaded font is not marked optional, the audit suggests making it so to avoid shifts.

The alternative would be: basically duplicate/reuse uses-rel-preload with a focus on fonts and suggest both preloading AND optional in one go. I think this advice would be too broad, and is certainly more complex. Let’s just encourage usage of optional if the developer has already decided to preload a font.

That’s my pitch. Open to discussion.

[xiaochengh]

Hi, I’m the one who implemented the change, so feel free to ping me if you want to know about the technical details.

I think it’s good idea to suggest preloading for optional fonts. Without preloading, the font will pretty much not be used unless you just refreshed the page (so that you have a warm memory cache). Besides:

• Using document.fonts.load() probably should count as a preload
• We just landed a change into M86 to increase the chance that an optional font gets used, while still ensuring no layout shift. Its main purpose is to reduce breakage, so it’s not an alternative of preloading, and developers shouldn’t rely too much on it.

---

And I’m not sure we should suggest setting font-display: optional for preloaded fonts, regardless of icon font or not. Setting optional means the font won’t be used when the user has a cold cache and slow network. So we should never set optional on a font that’s critical to the page. This includes icon font and some other cases.

Alternative thoughts:

• Maybe we can suggest optional for non-critical fonts. Not sure how to identify non-critical fonts, though
• Maybe we can suggest optional with a warning that this comes at a cost that the font may not be used, and hope it won’t be misused

[xiaochengh]

A note: The challenges of preloading with <link rel=preload> can be avoided with document.fonts.load(). We just need a font value that contains the font family name, weight and style. No need to know the actual URL.