预加载密钥请求 LightHouse

Question

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

这是pagespeed 结果。

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

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

<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 />

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

   <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 类型。

Answer 2

如果您使用 WordPress 平台并遇到此问题，请查看本文至 fix preload key request 只需使用 WordPress 插件将预加载键添加到称为“资产清理”的字体 安装插件去setting->Local Fonts-> Add URL那里，它将被修复。 欲了解更多信息，请访问以下参考网址 http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/