预载密钥请求灯塔

Question

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

这里是pagespeed结果。

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

这是我的index.html，其中包括font-awesome编号。

<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. 告诉浏览器“我希望您尽快获取它们。”

对于第2点和第3点，对woff和woff2复制相同的内容。在类型中声明正确的mime类型。