如何修复 PageSpeed 中的“确保文本在 webfont 加载期间保持可见”错误

您是否在检查 Google 的页面速度洞察力时收到“确保文本在 Webfont 加载期间保持可见”错误并且不知道如何解决此问题？ 一般来说，我知道如何在基于 PHP 或 HTML 的自定义网站上解决这个问题，但是当谈到 WordPress 时，我也遇到了困难。

因此，在本指南中，我们将讨论如何在 WordPress 中解决此问题（我还将分享在基于 PHP 和 HTML 的自定义站点中解决此问题的步骤）并通过消除此错误来提高页面速度得分。

为什么它在 PageSpeed 中显示“确保文本在 Webfont 加载期间保持可见”错误

在 Google 的 PageSpeed Insight 上测试您的网站时，您可能已经看到“确保在 Webfont 加载期间文本保持可见”错误的问题，点击该错误后，它将显示字体文件的完整 URL。

正如您在上图中看到的，我还在此网站上收到“确保文本在 Webfont 加载期间保持可见”错误，当我单击它时，它将显示 Google 字体文件的完整 URL。

为什么会显示错误？

当网站在浏览器中加载并检测到任何应用于文本的自定义字体文件时，它会等到字体下载完毕，直到那时，文本才可见。 自定义字体文件下载后，会立即应用到网站上，这就是所谓的隐形文字闪现。

如何修复不可见文本的 Flash？

修复不可见文本的闪烁还可以修复您网站上的“确保文本在 Webfont 加载期间保持可见”错误，并且修复此问题非常容易。

您可以通过添加轻松解决此问题

字体显示：交换；

您当前的代码

@字体脸{

}

CSS 属性。

但是@font-face 是什么？

@font-face 是一个简单的 CSS 规则，您可以通过它将自定义字体应用于文本。 它具有 woff2、woff、ttf 等扩展名。例如，@font-face 代码如下所示：

 @字体脸{

字体系列：Roboto，无衬线；

字体显示：交换； // ---> 它将解决这个问题。

字体样式：正常；

字体粗细：400；

src：网址（Roboto.woff2）；

}

现在我们在段落中应用这个字体；

 p {

字体系列：Roboto，无衬线；

字体大小：18px；

}

当网站加载时，它表明段落标签应用了“ Roboto ”字体，它会立即开始下载段落标签中使用的字体。 在它下载字体之前，文本保持不可见。

这就是为什么它在 pagespeed 中显示“确保文本在 webfont 加载期间保持可见”错误并添加font-display: swap; 在你当前的@font-face CSS 中可以解决这个问题。

如何在 WordPress 中解决此问题

如果您使用的是 WordPress，并且它在页面速度洞察力中显示此错误，那么您可以使用简单的步骤轻松解决此问题。 我已经分享了在本地字体和 Google 字体上解决此错误的步骤。

谷歌字体解决方案

最初，Google Fonts 不会添加font-display: swap; 规则到他们的字体，但现在他们支持一个新的查询参数来应用字体显示：交换； 通过在 google 字体文件的末尾添加&display=swap参数。

这是它的外观；

如果您是主题开发人员或者您知道如何在 WordPress 中编辑主题文件，那么您可以轻松地将&display=swap参数添加到您的 Google 字体文件中。

但是如果您不习惯编辑 WordPress 主题文件，您仍然可以使用Asset CleanUp等各种插件来添加此参数并解决“确保在 Webfont 加载期间文本保持可见”的问题。

如何使用“资产清理”插件解决此问题

要在您的 Google 字体文件中应用display=swap参数，您必须从免费提供的 WordPress 库下载并安装 Asset CleanUp 插件。

下载并激活插件后，单击 WordPress 管理面板中的“资产清理”选项 > 然后单击“资产清理”下的“设置”以打开优化页面。

进入设置页面后，单击“ Google 字体”选项。 当您单击Google 字体选项时，它将进一步打开设置，您可以从中轻松管理各种设置以优化 google 字体文件。

其中一些设置可以包括：

一旦你在谷歌字体文件设置中，在“应用字体显示：CSS属性值”设置并将其从“不应用（默认） ”更改为“交换（最常用） ”，它将添加 &display=交换参数到你所有的谷歌字体文件。

主题和插件字体解决方案

大多数情况下，您的 WordPress 主题或插件会加载其他字体，例如 font-awesome 或 icon 字体，并且在 Google PageSpeed Insight 中也会显示相同的问题。

这也是一个简单的解决方法，但它需要一点 WordPress 编辑知识。 如果您不习惯编辑代码，您还可以使用高级版“ Asset CleanUp Pro ”插件自动添加font-display: swap; WordPress 主题或插件样式表中的 CSS 属性。

要使用 Asset CleanUp Pro 解决此问题，请单击 WordPress 管理面板中的“ Asset CleanUp ”选项>，然后单击“Asset Cleanup”下的“设置”以打开优化页面。

进入“资产清理”>“设置”页面后，单击“本地字体”选项以打开本地字体的自定义设置。

在浏览器中打开“本地字体”自定义设置后，从“应用字体显示：CSS 属性值”下的给定选择选项中选择“交换（最常用） ”以自动添加字体显示：交换； 在您的所有样式表中。

包起来

在本指南中，我们已尽力解释如何解决 pagespeed insight 上的“确保文本在 webfont 加载期间保持可见”或“不可见文本闪烁”问题。

页面加载时间和页面速度是提供良好用户体验的重要因素，解决此问题可以提供更好的用户体验。 除非页面上显示了所有内容，否则不应将其视为已加载页面。

因此，您必须减少页面上的内容加载时间，以使页面不会超时，并且用户可以获得他们想要的平衡、速度和稳定性。 如果您还遭受网站速度缓慢的困扰，那么您可以查看我们关于网站速度优化的帖子以正确优化它。