通过预加载 web 字体提高加载速度

此 Codelab 向您展示了如何通过 rel="preload" 来预加载 web 字体,从而避免出现无样式文本 (FOUT) 闪烁的情况。

措施 #

在添加任何优化之前,首先测量网站的性能表现。 1. To preview the site, press View App. Then press Fullscreen fullscreen. 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

  1. Click the Lighthouse tab.
  2. Make sure the Performance checkbox is selected in the Categories list.
  3. Click the Generate report button.

生成的 Lighthouse 报告将显示最大关键路径延迟下的资源获取顺序。

关键请求链中的 web 字体。

在上方的审计中,web 字体是关键请求链的一部分,并且会最后获取。关键请求链是指浏览器优先处理和获取资源的顺序。在此应用程序中,web 字体(Pacfico 和 Pacifico-Bold)通过 @font-face 规则定义,并且是浏览器在关键请求链中获取的最后一个资源。Web 字体通常会延迟加载,即在下载关键资源(CSS、JS)之前不会加载它们。

下面列出了应用程序获取资源的顺序:

Web 字体是延迟加载的。

预加载 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 web 字体并从将其从关键请求链中删除

请注意Pacifico-Bold.woff2是如何从关键请求链中删除的。在应用程序中。它的获取时间较早。

已预加载 Pacifico-Bold web 字体

通过预加载,浏览器知道它需要提前下载这个文件。需要注意的是,如果使用不当,预加载可能会对未使用的资源发出不必要的请求,从而导致性能损耗。

Last updated: Improve article