预加载密钥请求LightHouse

Question

我正在使用font-awesome图标在angular应用程序。我在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

要做到这一点，有三种方法。

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进行同样的复制。以类型声明正确的mime类型。

Answer 2

如果您正在使用WordPress平台并面对这个问题，那么只需查看本文到修正预加载键请求上的内容，您就可以使用WordPress插件向名为“Asset”的字体中添加预加载键，安装插件转到setting->Local Fonts-> Add URL，然后将其修复。欲了解更多信息，请访问下面的参考网址http://freelancersiddheshlad.com/fix-preload-key-requests-with-fonts-in-wordpress/