The font-display audit doesn't do what it thinks it does

[tunetheweb]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://almanac.httparchive.org

What happened?

We use font-display: block because that's my preference (I hate the inflation effect of swap and preload the selft-hosted, subsetted fonts so block period is minimal).

The audit passes. The audit, as it's currently titled ("Ensure text remains visible during webfont load") and described ("Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more about font-display.") should fail.

I staged the site without any font-display setting at https://20240121t142255-dot-webalmanac.uk.r.appspot.com/en/2022/ and ran a PSI test on it and now it does fail, with quite large potential savings:

It seems the original intent of the audit (#3831) was to recommend swap/optional but it was changed during PR review to include block, but not changed to consider that a fail.

So the audit should be title "Use an explicit font-display value" rather than "Ensure text remains visible during webfont load". Or should be changed to fail if potential savings > some minimal value.

What did you expect?

The audit should fail

What have you tried?

Running same site without font-display set and it fails, even though load time is the exact same (As Chrome defaults to block).

How were you running Lighthouse?

PageSpeed Insights

Lighthouse Version

11.4.0

Chrome Version

Chrome 120

Node Version

No response

OS

N/A

Relevant log output

"font-display": {
      "id": "font-display",
      "title": "All text remains visible during webfont loads",
      "description": "Leverage the `font-display` CSS feature to ensure text is user-visible while webfonts are loading. [Learn more about `font-display`](https://developer.chrome.com/docs/lighthouse/performance/font-display/).",
      "score": 1,
      "scoreDisplayMode": "metricSavings",
      "warnings": [],
      "details": {
        "type": "table",
        "headings": [],
        "items": []
      },
      "guidanceLevel": 3
    },

[tunetheweb]

Related to #10127

[connorjclark]

To make sure we're on the same page...is this a good summary of what should be done?

Change the audit to only fail a font if a) the font-display is block or auto/not set and b) network time is above some threshold

[tunetheweb]

That would work.

By network time do you mean the total font download time? Or the time since it’s needed (I.e. if it delays FCP or LCP)? Ideally if font is downloaded before it’s needed then it wouldn’t fail audit but that could be tricky to figure out.

Might also wanna exclude icon fonts since they should block as per #10127 but not sure how easier it is to identify those.

Also fonts not needed for the above the fold content are another tricky one. Should they cause the audit to fail?