预加载密钥请求 LightHouse

Question

我font-awesome在应用程序中使用图标angular。我检查了我的网络结果pagespeed。我遇到字体问题。

这是pagespeed结果。

它所说的用途<link rel=preload>，但问题是它..fonts/fontawesome-webfont.woff?v=4.7.0可以在FontAwesome的 css 文件中使用，那么我如何为此添加预加载呢？或者有什么解决方案可以修复它？

这是我的index.html，其中包含了font-awesomecdn。

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />

我认为这就是问题所在css。

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Answer 1

有 3 种方法可以实现此目的。

1. 在本地使用它。其余的你都知道。

2. 告诉浏览器“我很快就会调用这些文件，做好准备。”

使用preconnect。（https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect）

确保您使用as="font".

<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />

3. 告诉浏览器“我希望你尽快获取它们。”

   <link rel="preload" as="font" href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot" crossorigin="anonymous">

对于第 2 点和第 3 点，对 woff 和 woff2 重复相同的操作。在 type 中声明正确的 mime 类型。