8

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

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

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

利用 font-display 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.comdisplay=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 加载期间文本保持可见？

4

0 回答 0