目录
当谈到网络性能优化时，预加载是你的武器库中一个有用的工具。
预加载使您可以声明浏览器必须请求的特定资源，而不会阻止页面其余部分的呈现。
基本上，它使您可以更好地控制网页上资源的加载方式，从而帮助您优化 WordPress 网站的性能并缩短网站的感知页面加载时间。
在本文中，我们将重点关注预加载的一个特定方面——网络字体预加载。
什么是预加载？
这篇文章中详细介绍了预加载，下面的是快速版本：
当有人访问您的网站时，他们的浏览器会按一定顺序加载该网页上的所有资源，您可以从Chrome 开发人员工具或GTmetrix或WebPageTest等性能测试工具的“网络”选项卡中看到：
默认情况下，Web 浏览器根据网站 HTML 中声明的顺序决定如何加载这些资源，从性能和/或用户体验的角度来看，这并不总是最佳的。
通过预加载，您可以强制浏览器尽早加载某些资源，例如字体。这使您可以更好地控制网站的加载方式，如果实施得当，可以提高网站的性能。
为什么字体预加载很重要？
默认情况下，您的站点将延迟字体请求，直到构建渲染树之后。
本质上，在默认行为下，浏览器将等待加载字体文件，直到它开始将可见内容“绘制”到用户屏幕上。基本上，浏览器会延迟加载字体文件，以便只有在浏览器知道需要该字体时才开始加载特定字体（它知道需要该字体，因为它已经需要使用该字体来“绘制”文本）屏幕）。
但是，这种延迟加载方法可能会导致浏览器已准备好开始显示文本，但由于尚未下载字体，因此浏览器需要延迟绘制文本，直到下载了字体。
这称为FOIT，或Flash of Invisible Text。或者，它也可能导致FOUT或无样式文本的 Flash。
- FOIT – 在加载字体文件之前文本是不可见的。
- FOUT – 文本可见，但使用系统字体。字体文件加载后，文本将切换到新的字体样式，这可能会给访问者带来不和谐的体验，因为文本会出现“跳跃”和“变形”。
总之，如果没有字体预加载，您可能会遇到浏览器已准备好加载网站文本的情况，但由于字体尚不可用而无法加载。也就是说，它需要先下载字体才能绘制文本。
您想要避免这种情况的原因是，它会减慢访问者感知的页面加载时间，从而导致用户体验下降。
通过字体预加载，您可以强制访问者的浏览器尽早加载重要字体，以便浏览器可以在准备好后立即开始绘制文本，而不是等待加载字体。
字体预加载不会告诉浏览器该字体将用于什么用途，它只是说“嘿，立即下载此字体，以便它可以使用”。然后，当浏览器准备好开始绘制文本时，它已经有了可用的字体，并且可以立即开始显示文本。
此外，预加载字体解决了Google PageSpeed Insights 的“预加载关键请求”建议，并帮助您改进累积布局偏移指标和最大内容绘制、两项 核心 Web 生命力。
如何在 WordPress 上预加载字体
虽然有一些插件可以帮助您预加载某些类型的字体（例如 Google Fonts），但预加载字体的手动方法需要向 WordPress 网站的 <head> 部分添加一些代码。
您可以通过多种方式在 WordPress 网站的 <head> 部分插入代码。你可以：
- 直接编辑子主题的header.php 。
- 使用免费插件，例如WPCode。
- 使用functions.php文件中的wp_head 钩子、自定义插件或免费的代码片段插件之类的东西。
您将使用的代码本身如下：
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">- rel – 这告诉浏览器预加载字体文件。
- href – 这是实际字体文件的链接。您需要对其进行编辑以反映您想要预加载的字体。
- as – 这告诉浏览器它正在预加载字体文件。
- type – 这指定字体文件类型。如果您想预加载不同的文件类型，则需要更改它。
- crossorigin – 这是为了满足字体预加载的一个怪癖，我将在下一节中详细介绍这一点。
您可能想知道WordPress 最好的缓存插件是什么。如果是这样，您可能会在我们的专用页面上找到有用的信息！
字体预加载和优化的最佳实践
下面是正确使用字体预加载的一些最佳做法。
1.限制预加载的字体和格式的数量
如果您使用多种字体，则可能会倾向于预加载每种格式中使用的每种字体。
然而，使用字体预加载会影响性能。
通过预加载，您实际上会强制浏览器对字体 URL 发出高优先级请求，无论是否需要。如果加载不必要的字体，则会不必要地延迟访问者的浏览器加载网站的其余部分。
为了平衡这些权衡，您应该将预加载的字体数量限制为初始页面加载绝对必需的字体（即首屏所需的字体）。
根据您的设计，这可能只是您用于标题的字体。或者，它还可能包括您用于正文的字体。
此外，您还需要限制预加载的格式。例如，仅预加载常规格式，而不预加载斜体或粗体格式。
仅使用斜体文本或粗体文本的 FOUT 就不那么刺耳了，因为这些格式可能只占内容的一小部分。
基本上，您只想预加载会对您网站的首屏体验产生显着影响的字体。
2. 确保您预加载的字体与您的 CSS 匹配
如果您从外部 CDN 服务（例如 Google Fonts 或 Adobe Fonts）加载字体，请注意您预加载的字体文件与 CSS 中所需的字体相匹配。
CDN 上的字体可能已更新，这可能会导致您最终预加载与 CSS 中要求的字体版本不同的字体版本。这可能会导致不理想的情况，即您实际上强制访问者的浏览器下载同一字体的两个版本。
为了避免这种情况，如果可能的话，您还可以在本地托管自定义字体。
免费的 OMGF 插件可以帮助您在 WordPress 上本地托管 Google 字体。它还可以自动帮助您仅预加载首屏加载的字体。
3. 确保使用 crossorigin 属性
预加载字体时，即使提取不是 crossorigin ，设置 crossorigin 属性也很重要。您可以在之前的代码示例中看到这一点：
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">虽然原因很复杂，但最终的结果是浏览器会忽略没有 crossorigin 属性的预加载字体，这将导致浏览器实际上两次获取字体（一次是在预加载期间，另一次是在丢弃预加载字体之后）。
| 字体预加载是改善 Core Web Vitals 的 SEO 技巧之一。阅读我们的文章并发现所有其他最佳做法！ |
发表回复