Fonts with font-display optional are not preloaded

[tannerdolby]

Running a Lighthouse audit on https://web.dev/serve-responsive-images/ reveals a score of 94 in "Best Practices" as many fonts have font-display: optional and aren't preloaded. Could the fonts be preloaded by adding <link rel="preload"> to get a score of 100 in best practices?

I couldn't find those fonts within document metadata for the page, so I'm not entirely sure where they are being placed in HTML or loaded from.

• …regular/cyrillic.woff2(web.dev)
• …regular/greek.woff2(web.dev)
• …regular/vietnamese.woff2(web.dev)
• …regular/latin-ext.woff2(web.dev)
• …bold/cyrillic.woff2(web.dev)
• …bold/greek.woff2(web.dev)
• …bold/vietnamese.woff2(web.dev)
• …bold/latin-ext.woff2(web.dev)

Preventing layout shifting and FOIT by preloading optional fonts

Screenshot of Best practices section of Lighthouse Audit

[robdodson]

@tannerdolby can you share which version of chrome you're using and which operating system?

I'm surprised that it's trying to load all of those fonts. When I test the site on my machine and separately using PageSpeed Insights, I don't see that list of fonts or that warning.

[tannerdolby]

@tannerdolby can you share which version of chrome you're using and which operating system?

Yeah, sure thing! Chrome is up-to-date and I'm on macOS High Sierra, details below:

Chrome: Version 92.0.4515.107 (Official Build) (x86_64)
OS: macOS High Sierra 10.13.6

I was surprised when I saw it too. I just ran a test with PageSpeed and I don't receive the list of fonts or warning like you mentioned. But after running a fresh lighthouse audit, it seems to still be giving the warning.

[robdodson]

@tannerdolby just curious, do you have any flags enabled in chrome://flags ?

[robdodson]

@housseindjirdeh it's true that we're not preloading the fonts that tannerdolby mentions. Those are our cyrillic and vietnamese versions of google sans I believe. Do you know if we should preload every font face possible? I was nervous about doing that in case it cause an unintended performance issue.

[tannerdolby]

just curious, do you have any flags enabled in chrome://flags ?

I had a look through the entire list (as there wasn't an easy way to filter between "enabled", "default" etc) and it looks like there are 5 flags enabled. The rest are mostly default and some disabled.

[robdodson]

hm yeah I doubt any of those would cause weird font loading behavior. I'll keep investigating.

[brendankenny]

hi @tannerdolby, I believe this is GoogleChrome/lighthouse#11960

Lots of stuff in that thread if you want to dig in :)

For now this audit has been disabled pending the actions in GoogleChrome/lighthouse#11960 (comment). You'll need Chrome 93+ (currently in Beta) or Canary to get a version of Lighthouse with that updated, though.

[tannerdolby]

hi @brendankenny !

Thank you, I will dig into GoogleChrome/lighthouse#11960 and go from there :)

For now this audit has been disabled pending the actions in GoogleChrome/lighthouse#11960 (comment). You'll need Chrome 93+ (currently in Beta) or Canary to get a version of Lighthouse with that updated, though.

Ah I see, ok got it!

[robdodson]

thanks @brendankenny. i'm going to close this issue if that's ok