预加载密钥请求 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 种方法可以完成此操作。

在本地使用。剩下的你就知道了。
告诉浏览器"I am going to call these files shortly, be prepared."

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

告诉浏览器"I want you to fetch them asap."

<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 进行相同的复制。在类型中声明正确的 MIME 类型。

Answer 2

如果您使用的是 WordPress 平台并遇到此问题，请查看这篇文章 fix preload key request 只需使用 WordPress 插件将预加载密钥添加到称为“资产清理”的字体安装插件到 setting->Local Fonts-> Add URL 那里，它会被修复。有关更多信息，请访问下面的参考 URL http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/

预加载密钥请求 LightHouse

Preload key requests LightHouse

font-awesome

performance-testing

google-pagespeed

lighthouse

pagespeed-insights