此 Codelab 介绍了如何使用 rel="preload"
预加载网页字体,以移除任何无样式文本 (FOUT)。
测量
在添加任何优化措施之前,请先衡量网站的表现。
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
生成的 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.woff2
是如何从关键请求链中移除的。它会在应用中提前提取。
有了预加载,浏览器便知道自己需要提前下载此文件。请务必注意,如果使用不当,预加载可能会对未使用的资源发出不必要的请求,从而影响性能。