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

[tunetheweb]

FAQ

• [X] Yes, my issue is not about variability or throttling.
• [X] 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
    },