本文将探讨如何通过预加载字体来改善核心网络指标。我们将分析字体加载如何影响如最大内容绘制（LCP）和累积布局偏移（CLS）等性能指标，并了解如何正确预加载字体以确保文本更快显示。
网页字体如何影响核心网络指标？
要理解字体是如何加载的，让我们看看一个典型请求瀑布图。在这个请求瀑布图中，我们已经突出了字体请求链：
HTML请求完成 然后开始引用字体的CSS请求 CSS请求完成后，字体请求才能开始 字体加载完成后，页面上的文本将使用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监控包括：
深入的页面速度报告 自动化建议 真实用户分析数据
優(yōu)網科技秉承"專業(yè)團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網科技成立于2001年，擅長網站建設、網站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網解決方案。優(yōu)網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網、微信商城、企業(yè)微信）等一系列互聯(lián)網應用服務。
公安局備案號：
專屬顧問
