目录
- 确保文本在 Webfont 加载期间保持可见的方法
- Webfont 负载对性能有什么影响？
- 如何修复确保文本在 WordPress 上加载 Webfont 期间保持可见（手动）
- 如何修复确保文本在 WordPress 上加载 Webfont 期间保持可见（使用插件）
如果您曾经对 PageSpeed 见解进行过性能审核，Lighthouse 可能会建议“确保文本在网页字体加载期间保持可见”。
当您使用 Font Awesome、Adobe Font 或 Google Fonts 等网络字体时，它们并不存在于访问者的计算机上：必须从 Internet 下载它们。这需要时间，如果网站无法有效加载网络字体，Lighthouse 会触发警告。
系统字体与网络字体
有两种类型的字体：系统字体和网络字体。第一个旨在在计算机上安装和读取，扩展名为 .ttf 或 .otf。
另一方面，网络字体是专门为在互联网上使用而设计的，可以通过“@font-face CSS”声明来加载。此规则告诉浏览器要下载哪种 Web 字体，以便将正确的自定义字体应用于文本字符串。它带有 .WOFF、TrueType 或 SVG 等扩展名。
确保文本在 Webfont 加载期间保持可见的方法
确保文本在网络字体加载期间保持可见意味着网页上的文本永远不应该被隐藏，即使网络字体尚未加载。
为了解决这种加载间隙，某些浏览器会隐藏文本，直到加载字体为止，从而导致不可见文本 (FOIT) 闪烁。
什么是 Flash 隐形文本 (FOIT)？
如果浏览器等待太长时间才能加载网络字体，则会发生 FOIT（不可见文本闪烁）。在下面的示例中，实际文本已加载并可以突出显示，但由于网络字体尚未完全加载，因此它仍然不可见：
因此，Lighthouse 将标记任何闪烁此不可见文本的字体 URL。
| “确保文本在 Webfont 加载期间保持可见”= 即使在加载 Web 字体时，文本也应该是用户可见的。 |
究竟是什么触发了此 PageSpeed Insights 警告？
如果 Lighthouse 发现一种不具备以下属性之一的 Web 字体 URL，则会触发“确保文本在 Web 字体加载期间保持可见”警告：
- swap
- fallback
- optional
- block
为了找到答案，Lighthouse 会遍历 CSS 中显示的所有 Web 字体，并检查是否已为每种 Web 字体指定了其中一个 font-display 属性。
此网络字体问题会影响页面的速度，因为某些浏览器会在“加载字体时间”发生时隐藏所有文本。让我们看看网络字体对性能的实际影响。
Webfont 负载对性能有什么影响？
Webfont 加载会影响页面性能，因为浏览器无法立即将文本呈现给用户：它需要等待 Webfont 准备好。让我们回顾一下 FOIT 对性能的 4 个主要影响，包括Core Web Vitals。
1.影响PageSpeed Insights分数
FOIT（不可见文本闪烁）问题会影响 Google PageSpeed Insights 报告中的性能得分。在下面的示例中，如果我们删除 FOIT 并确保文本在加载过程中可见，我们可以节省 333 毫秒：
此外，PageSpeed Insights 在“消除渲染阻塞资源”部分中标记了与网络字体相关的另一个问题。根据 Lighthouse 的说法，如果我们正确优化网络字体 CSS，我们可以节省 930 毫秒：
2. 影响累积布局转变等级（核心网络指标）
为了优化和提高累积布局偏移等级，您应该避免由网页字体引起的突然布局偏移。确保您的文本在 Web 字体加载时保持可见有助于防止意外内容移动（无需用户交互）。如果出现不可见文本的闪烁，下载和渲染网络字体可能会导致布局变化。
| 📖 在渲染网页字体之前会显示不可见文本 → 发生突然的布局变化 → CLS 等级受到影响 |
3. 首个内容绘制和最大内容绘制（核心网络生命）成绩恶化
最大内容绘制 (LCP)与首次内容绘制 (FCP)齐头并进，因为它们告诉您第一个重要内容呈现给访问者需要多长时间。
当浏览器遇到尚未加载的网页字体时，它会在两种解决方案之间犹豫：
- 我应该延迟渲染文本直到网络字体加载吗？
- 我应该在网络字体到达之前以后备字体呈现文本吗？
“font-display”属性用于控制此行为，此性能决策会影响 FCP 和 LCP（以及 CLS，即上一节中提到的布局稳定性）。
4.影响用户体验和转化
当网页字体加载期间文本不可见时，用户体验也会受到影响：没有人喜欢在尝试访问网站时出现空白页面。主标题和文本对于用户来说至关重要，因为它们会在几秒钟内表明该网站是否包含所需的信息。
更重要的是，如果网站被认为速度缓慢并且用户的浏览体验受到干扰，他们完成预订或购买的可能性就会降低。2019年，Portent进行了一项研究，研究了速度与转化之间的相关性。这是他们的发现：
- 0-4 秒的加载时间最有利于转化率。
- 页面加载时间的前 5 秒对转化率的影响最大。
因此，第一印象（尤其是前 4 秒）决定了用户是否会完成购买。
网络字体会影响加载速度、性能、用户体验，甚至您的销售额！幸运的是，有一些技术可以确保文本在加载过程中保持可见，我们将在接下来的两节中详细介绍它们。
如何修复确保文本在 WordPress 上加载 Webfont 期间保持可见（手动）
要修复“确保文本在 Webfont 期间保持可见”警告，您需要在 Web 字体上使用font-display: swap声明。字体 CSS 中的这个简单属性修复了 WordPress 上的不可见文本问题：它在 Web 字体加载期间显示文本。
在实际示例中，您的字体 CSS 应如下所示：
| 优化前 | 优化后 |
| @font-face { font-family: Arial; } | @font-face { font-family: Arial; font-display: swap;} |
此声明修复了 PageSpeed Insights 警告并将问题移至“通过审核”部分：
| 📖 font-display:swap CSS 声明 = 不再有不可见文本 = 不再有 PSI 警告 |
“font-display:swap”对 Webfonts 有什么影响？
“字体显示”是一个 API，指示选择在网页上显示字体的策略。“交换”指定浏览器使用该字体的任何文本都应立即使用系统中存在的字体显示：Flash of Unstyled Text。
优先级是渲染文本，无论字体是否首先来自系统。
| 💡 UX：最好先用系统字体显示一些文本，而不是什么也不显示。 |
这可以避免出现不可见文本闪烁 (FOIT)，因为在加载自定义 Web 字体之前，内容会使用系统字体显示。当网络字体准备好后，系统字体当然会被替换。
通过包含 CSS 声明 font-display:swap，FOIT 变为 FOUT，如下例所示：
💡提示：为了优化字体加载过程，还应该通过“预加载”机制预加载首屏字体<link rel="preload" href="yourfont.extension">这允许浏览器优先加载地下资源，而不影响其他资源的加载。 |
在 WordPress 中的 Webfonts 上实施 CSS 声明
要在 WordPress 中实施此更改，请转到外观 > 主题编辑器并打开 CSS 样式表 (style.css)。添加 @font-face 查询和“swap”属性以引用您的自定义字体并将其应用到您的网站。
我们建议您仅在您对编码感到满意的情况下才编辑 style.css 和functions.php 文件。任何错误的编辑都可能会破坏您的网站。
如果您希望安全起见并节省一些宝贵的时间，您可以使用 WordPress 插件来删除这种闪烁的不可见文本并有效地优化您的网络字体。
如何修复确保文本在 WordPress 上加载 Webfont 期间保持可见（使用插件）
要解决 WordPress 中的不可见文本问题，您可以从 WordPress 插件（例如 WP Rocket、FlyingPress 和 Stringlocater）获得一些帮助。
1. WP Rocket
WP Rocket 可能有助于修复 FOIT 并确保文本在 Webfont 加载期间保持可见。它通过应用属性来优化 Google 字体font-display: swap。WP Rocket在安装后自动优化 Google Fonts，并立即解决与此类字体相关的 PageSpeed Insights 警告。
WP Rocket 还有助于处理其他字体。就是这样。
- 对于 CSS 文件中引用的其他网络字体，WP Rocket 将自动应用所需的 font-display: swap; 属性，通过启用缩小或优化 CSS 交付选项。
- 启用“删除未使用的 CSS”选项后，font-display: swap; 描述符应用于生成的“Used CSS”文件中找到的字体。
简而言之，WP Rocket 将负责网络字体加载并解决 PageSpeed Insights 建议。
如果启用了这些选项但仍然出现此警告怎么办？
这通常是因为字体以 WP Rocket 无法处理的方式加载到您的网站上：
- 在使用 @import 加载的第 3 方样式表中
- 通过 JavaScript 而不是在样式表中加载
- 在已经缩小的样式表中，因此不由 WP Rocket 处理。提示：启用合并 CSS 或删除未使用的 CSS，您应该可以解决该问题。
WP Rocket 的另一个重要的字体优化是“预加载字体”选项。这使得浏览器能够更快地找到字体并尽快开始下载它们。在用户端，您只需指定需要预加载的字体
对于更好奇的人来说，这就是后台发生的情况：WP Rocket 将在您网站的 <head> 中应用预加载标签：
<link rel="preload" as="font" href="https://example.com/wp-content/themes/paperback/inc/fontawesome/fonts/fontawesome-webfont.woff2" crossorigin><br>2.FlyingPress
FlyingPress 是 WordPress 的免费增值可配置速度优化插件，可修复不可见文本 (FOIT) 并将 :swap 应用于 CSS @font-face 规则。如果网络字体尚未准备好，则会有后备方案，并会使用系统字体。加载网络字体后，它将替换系统字体。
3. Stringlocator
这个免费插件使用 @font-face 代码识别 CSS。它有助于搜索您的主题和插件，哪些自定义网络字体需要优化。
注意：一旦您确定了网页字体，您仍然需要手动将 :swap 参数添加到您的网页字体中。
4. 使用你的 WordPress 主题
某些主题具有过滤器，您可以将其放入定制器中，以对其生成的 Google 字体启用“swap”。例如，GeneratePress 使用以下过滤器：
add_filter( 'generate_google_font_display', function() {
return 'swap';
} );
发表回复