预加载网页字体以提高加载速度

Garima Mimani
Garima Mimani
GitHub 故障

此 Codelab 介绍了如何使用 rel="preload" 预加载网页字体来移除 任何闪烁的无样式文本 (FOUT)。

测量

请先衡量网站的效果，然后再添加优化措施。

  1. 如需预览网站，请按查看应用。然后按 全屏 全屏。
  2. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  3. 点击 Lighthouse 标签页。
  4. 确保类别列表中的效果复选框处于选中状态。
  5. 点击生成报告按钮。

生成的 Lighthouse 报告将在最大关键路径延迟时间下显示资源的提取序列。

网页字体存在于关键请求链中。

在上面的审核中，网页字体是关键请求链的一部分，最后提取。关键请求链表示浏览器获取优先资源和提取资源的顺序。在此应用中，网页字体（Pacfico 和 Pacifico-Bold）是使用 @font-face 规则定义的，是浏览器在关键请求链中抓取的最后一项资源。通常情况下，网页字体采用延迟加载方式，这意味着在关键资源（CSS、JS）下载完毕后，网页字体才会加载。

以下是应用中提取的资源序列：

网络字体会延迟加载。

预加载网页字体

为避免出现 FOUT，您可以预加载立即需要的网页字体。在文档标头中为此应用添加 Link 元素：

<head>
 <!-- ... -->
 <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

as="font" type="font/woff2" 属性会指示浏览器将此资源下载为字体，并有助于确定资源队列的优先级。

crossorigin 属性指示是否应通过 CORS 请求提取资源，因为字体可能来自不同的网域。如果没有此属性，浏览器将忽略预加载的字体。

由于网页标头中使用了 Pacifico-Bold，因此我们添加了预加载代码，以便更快抓取它。预加载 Pacifico.woff2 字体并不重要，因为它可以为非首屏文本设置样式。

重新加载应用并再次运行 lighthouse。查看关键路径延迟时间上限部分。

已预加载 Pacifico-Bold 网页字体并将其从审核请求链中移除

请注意 Pacifico-Bold.woff2 是如何从关键请求链中移除的。应先在应用中提取。

已预加载 Pacifico-Bold 网页字体

预加载后，浏览器就会知道需要提前下载此文件。请务必注意，如果使用不当，预加载可能会针对未使用的资源发出不必要的请求，从而降低性能。