预加载Google字体

Question

预加载Google字体

50

Light House的审核建议我预加载关键请求，具体来说是我在React应用程序中使用的两个Google字体。一位Light House成员建议使用以下代码：


<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

我知道它正在发出请求，因为我在瀑布流中看到它，并且我收到了这个控制台警告：

"The resource https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700 是使用 link preload 预加载的，但是从窗口的加载事件后几秒钟内没有被使用。请确保它具有适当的“as”值，并且是有意地预加载的。

不幸的是，这两个字体在我的应用程序中不显示了。我需要在CSS中使用@font-face之类的方式来定义这些字体吗？

- wildair

我看不到你的代码，但我猜测你用<link rel="preload">替换了<link rel="stylesheet">。这是不够的。你需要同时使用preload和stylesheet。 - Loilo

1

这样做可以吗？<link rel="preload" as="style" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> - wildair

还不行。您不应该将这些标签合并为一个，而是保留两个标签。最终，每种字体都会有两个<link>标签。一个用于“预加载”，一个用于“样式表”。 - Loilo

这个有效： <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:700" crossorigin> <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans" crossorigin> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" crossorigin> <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet" crossorigin> - wildair

没有添加crossorgin属性，我从LightHouse得到了一个渲染阻塞样式表警告，但是，这个为了预加载字体字体的努力根据Chrome的建议将我的第一个有意义的绘画提高到了3620ms，从2650ms降低了我的灯塔分数从88降至79。 - wildair

我还尝试将标签组合在一起，像这样：<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" rel="stylesheet" crossorigin>
这有点帮助，但在试图优化时，我无意中减慢了所有东西的速度... - wildair

3个回答

41

建议您按照以下顺序预连接、预加载，然后最后加载：

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>

仅使用 preconnect 或 preload 是不够的，您仍需要像往常一样加载。然后，您只需使用 :wght@700 指定任何非给定字体的默认字重即可。在连续的字体之间，使用管道符号 |。

- Michael Moriarty

1

有用的资源：https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect - Gangula

2

最完整的注释。我注意到谷歌最近将URL中的css替换为css2。 - AlexWebLab

1

预加载不需要 crossorigin，只需要使用 preconnect？ - Crashalot

1

谢谢@Alex。我已经按照你指出的更新了我的代码，使用了css2。 - Michael Moriarty

是的，@Crashalot，你确实需要 crossorigin，而且它已经在我的第一行代码中了。 - Michael Moriarty

显示剩余4条评论

1

谷歌总是从同一个域名fonts.gstatic.com提供字体。

因此，在添加样式之前预加载它。

<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700">

- Khazi Afzal

你说的话含糊不清。'preconnect' 是为了提前通知并连接你的网站到谷歌。你所缺少的 'preload' 表示你将要加载的内容。最后，根据你所指示使用 API 加载字体。 - Michael Moriarty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Angelos Chalaris · Accepted Answer

正确预加载字体的方法是同时添加 preload 链接和 stylesheet。一个基于 MDN 的简化示例如下：

<head>
  <meta charset="utf-8">
  <title>Preloading fonts</title>

  <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>

<body>
</body>

在上面的示例中，preload链接将发送请求以获取字体，无论客户端是否已安装，然后使用stylesheet链接来正确加载和使用它。 preload更像是告诉浏览器可能需要某个资源，以便请求该资源，如果您需要它或决定使用它，您可以使用它。

更多信息：