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

Garima Mimani
Garima Mimani

此 Codelab 向您展示了如何使用 rel="preload" 预加载 Web 字体,以移除任何未设置样式的文本闪烁 (FOUT)。

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

  1. 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  2. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  3. 点击 Lighthouse 标签页。
  4. 确保在类别列表中选中效果复选框。
  5. 点击生成报告按钮。

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

关键请求链中存在 Web 字体。

在上面的审核中,Web 字体是关键请求链的一部分,并且是最后提取的。关键请求链表示浏览器优先提取资源的顺序。在此应用中,Web 字体(Pacfico 和 Pacifico-Bold)是使用 @font-face 规则定义的,是浏览器在关键请求链中提取的最后一个资源。通常,Web 字体会延迟加载,这意味着在下载关键资源(CSS、JS)之前,系统不会加载这些字体。

以下是应用中提取资源的顺序:

网页字体会延迟加载。

预加载 Web 字体

为避免 FOUT,您可以立即预加载所需的 Web 字体。在文档开头添加此应用的 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 网络字体

通过预加载,浏览器会知道需要提前下载此文件。请务必注意,如果使用不当,预加载可能会对性能造成不利影响,因为它会对未使用的资源发出不必要的请求。