网站字体预加载，提升核心网络指标

本文将探讨如何通过预加载字体来改善核心网络指标。我们将分析字体加载如何影响如最大内容绘制（LCP）和累积布局偏移（CLS）等性能指标，并了解如何正确预加载字体以确保文本更快显示。

网页字体如何影响核心网络指标？

要理解字体是如何加载的，让我们看看一个典型请求瀑布图。在这个请求瀑布图中，我们已经突出了字体请求链：

1. HTML请求完成
2. 然后开始引用字体的CSS请求
3. CSS请求完成后，字体请求才能开始
4. 字体加载完成后，页面上的文本将使用Web字体渲染

在这种情况下，请求链导致了延迟，字体请求在4.54秒后完成。

页面加载后期字体渲染可能导致文本闪烁（FOUT）。当字体最终替换未样式化的文本时，可能会发生布局偏移，这会恶化页面的CLS得分。

在下面的胶片条中，我们可以看到由FOUT引起的布局偏移。一旦字体渲染完成，<h1>元素会迫使主图像向上移动并占据空白空间。

尽管FOUT并不理想，但最坏的情况是文本根本无法显示。这被称为不可见文本，只有在Web字体加载完成后，文本才会对访问者可见。

如何通过预加载优化网页字体

预加载是一种告诉浏览器在加载过程早期获取重要资源的技术。这有助于通过确保关键资产更早可用，减少渲染延迟，直接解决我们之前提到的FOUT和不可见文本问题，从而提高性能。

下面我们可以看到一个典型的字体请求链，字体请求在CSS请求完成后开始。

在这个页面上，LCP元素是<h2>文本，直到字体加载完成之前都是不可见的。为了确保字体请求能更早被发现，我们可以通过在HTML头部添加以下链接标签来预加载字体：

<link rel="preload" href="https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2" as="font" type="font/woff" crossorigin="anonymous"/>

预加载字体请求后，字体不再依赖于CSS请求。字体请求会更早被发现，并与渲染阻塞的CSS请求并行进行。LCP得分从1.82秒提高到1.24秒。

不要预加载太多字体

只有最重要的请求应该被预加载。这是为了避免请求之间的带宽竞争，消除预加载的好处。如果预加载了太多请求，实验室测试结果中会出现建议。

在这个例子中，我们可以看到预加载了38个字体。这不仅在字体请求之间，而且在渲染阻塞请求之间也造成了大量的带宽竞争。由于带宽竞争过多，页面无法快速渲染，导致FCP和LCP得分受到负面影响。

在移除这些预加载后进行实验，我们可以看到由于带宽竞争减少，CSS请求现在快了2秒完成。页面能够更快渲染，因此LCP得分也随之提高。

这个例子说明了选择要预加载哪些请求以最小化带宽竞争的重要性。由于FCP和LCP得分都提高了2秒以上，访问者可以更快地查看页面内容。

我的网站应该预加载哪些字体？

前一个例子强调了过度预加载字体的影响，那么应该预加载哪些字体呢？

任何折叠上方的重要字体都应该被预加载。比如导航、标题和任何主要的内容文本。

考虑最常用的字体。如果你使用了多种字体，预加载页面中频繁使用的字体，而不是仅用于单个部分的字体。

预加载Google字体

默认的Google字体嵌入代码包含两个preconnect提示，但没有预加载：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"/>

这是因为Google支持WOFF 2之外的多种字体格式。如果旧版浏览器加载页面，它将提供EOT或WOFF字体。在这种情况下，预加载WOFF2格式将毫无用处。

然而，WOFF 2现在拥有超过97%的浏览器支持。这意味着预加载这种格式的字体将惠及大多数用户。

如何预加载Google字体

首先，确定你的网站加载了哪个WOFF 2文件。你可以使用免费的网站速度测试工具或Chrome开发者工具。

然后将预加载提示添加到你的网站代码中：

<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v47/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBnkaSTbQWg.woff2" as="font" crossorigin="anonymous"/>

提示

字体可以使用unicode-range CSS属性分成不同的字符子集。如果你的网站使用非拉丁字符，你可能需要加载多个WOFF 2文件。

持续测试你的网站速度

字体和预加载可能会随着时间的推移而变化，导致预加载过时！这意味着你可能会同时加载旧字体和新字体，导致核心网络指标退化！在网站上预加载字体时，持续监控是至关重要的，以便在问题发生时及时发现。

开始你的免费14天试用并从今天开始优化。

监控页面速度和核心网络指标

DebugBear监控包括：

• 深入的页面速度报告
• 自动化建议
• 真实用户分析数据