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

Question

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

为了提高性能分数，我一直在尝试摆脱诊断：

确保文本在网页字体加载期间保持可见

利用字体显示 CSS 功能确保加载网络字体时文本对用户可见。 了解更多

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

这个结果也是通过

https://fonts.googleapis.com

安装 Roboto 的，当我将

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>

但是，显然，将 display=swap 添加到

MaterialDesignIcons css 文件

没有任何区别，例如：

<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

以便 文本在网络字体加载期间保持可见？

Answer 1

加载 SVG 而不是作为字体加载是最好的解决方案，因为它：

• 仅将所需的图标发送给客户端（tree-shaking），正如 James Coyle 也提到的那样
• SVG 有可能立即与内容一起加载或像图像一样加载

要作为字体加载，您需要下载大约 400KB 的所有图标（比任何现代 JS 框架都大），并且即使您只使用 100 个图标中的 10 个，也会在连接不良的情况下大幅减慢用户的速度。每次添加新图标时，您还必须下载这些图标。

现在我认为

display=swap

与网络字体没有任何区别的原因是因为显示交换的工作原理：

display=swap 赋予字体极小的块周期和无限的交换周期。

字体块周期：如果未加载字体，则任何尝试使用它的元素都必须呈现不可见的后备字体。如果这期间字体加载成功，就可以正常使用了

字体交换周期：如果未加载字体，则任何尝试使用它的元素都必须呈现后备字体。如果这期间字体加载成功，就可以正常使用了

在 MDN 上阅读更多内容

因此，阻塞期等待用户不可见字体的字体，而交换期等待具有后备字体的字体。
然而，与用系统已有字体中的“a”交换花哨的“a”字母不同，对于像角落里有齿轮的用户图标之类的东西没有后备方案......
因此本质上交换周期的行为与区块周期相同，因此

display=swap

的功能与根本不设置它相同（

display=auto

- 通常类似于

display=block

）！