Lighthouse：确保在加载 MaterialDesignIcons Webfonts 期间文本保持可见

Question

我想提高使用Vuetify构建的 Web 应用程序的Google Lighthouse分数。

为了提高性能得分，我一直试图摆脱诊断：

确保文本在 webfont 加载期间保持可见

利用字体显示 CSS 功能确保在加载 webfonts 时文本是用户可见的。了解更多

网址：https ://cdn.jsdelivr.net/npm/@mdi/font@latest/fonts/materialdesignicons-webfont.woff2 ? v = 4.5.95 (cdn.jsdelivr.net)

这个结果也是Roboto通过https://fonts.googleapis.com安装的，当我添加display=swap到链接时它消失了，如下所示：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link 
  rel="preload" 
  as="style" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>
<link 
  rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" 
  crossorigin>

但是，显然，添加到MaterialDesignIcons css 文件没有任何区别，例如：display=swap

<link 
  rel="preload"
  as="style"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>
<link 
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css?display=swap"
  crossorigin>

这样做，诊断项目不会消失。我应该如何加载materialdesignicons.min.css以便在 webfont 加载期间文本保持可见？