如何解决WordPress由于字体导致预加载关键请求问题？__wordpress教程

如今，速度就是一切。浏览器会尝试缓存网页上的内容以加快加载速度。有很多方法可以通知浏览器缓存什么、何时缓存以及缓存内容保留多长时间。

预加载就是这样一种缓存功能，有助于提高WordPress网站的页面加载速度。但是，这可能会在Google PageSpeed Insights工具中使用的Google Lighthouse报告中产生错误。

在本文中，让我们解释如何解决PageSpeed Insights中由于字体导致的预加载关键词请求问题。

如何使用预加载？

预加载，顾名思义，就是在页面开始加载时，通知浏览器立即开始缓存网页上的资源。这将有助于缓存稍后需要的CSS、脚本和字体。您可以在这篇Google开发人员文章中了解有关预加载的更多信息。

基本上，preload是HTML链接标签中rel属性的值。以下是在您的网站上使用预加载请求的语法：

对于网站上加载的每个CSS、脚本和字体文件，您需要在HTML的head标签之间插入此链接标签。

预加载的Google PageSpeed问题

虽然预加载会加快加载时间，但应该正确使用。使用PageSpeed Insights工具检查您的网站，看看是否有任何机会因预加载请求而可用。下面是一个示例，显示由于预加载关键请求，您可以节省7.05秒。

单击向下箭头时，您将看到导致延迟的所有相关内容。在这种情况下，都是网页上加载的字体。

PageSpeed Insights中的预加载关键词请求错误

WordPress插件和预加载

现在，您可能会对WordPress网站的Google PageSpeed报告中显示的预加载方式感到困惑。您会收到此错误的原因有很多：

通过在CSS中导入的主题和插件加载字体。
您正在使用像WP Rocket这样的缓存插件来预加载页面但不预加载字体。
您正在使用带有Google AdSense等广告的第三方字体或使用插件在您的网站上加载字体很棒的图标。

缓存插件将预加载请求键添加到所有资源。但是，使用@font-face在CSS中导入的字体不会使用预加载键请求。PageSpeed显示的错误可能是由于站点加载的字体未使用预加载键所导致。

如何修复由于字体导致预加载关键请求问题？

您可以通过在PageSpeed中显示的那些资源的站点标题上手动添加预加载键来消除错误。但是，也有一些插件可以自动在您的标题上插入元标记。我们将解释手动和插件方法。

使用WP Rocket修复Google PSI中的预加载关键词请求

首先，我们将使用WP Rocket插件进行说明，因为它很简单，您不需要修改PHP文件。

使用WP Rocket包括字体预加载

WP Rocket是一款高级缓存插件，可让您预加载字体。如果您使用的是WP Rocket，请转到“设置 > WP Rocket > Preload”部分。将字体资源的相对URL粘贴到“Preload fonts”文本框下并保存更改。这将帮助您摆脱Google PageSpeed Insights工具中的预加载请求问题。请记住，相对URL的格式应为“/wp-content/themes/your-theme-name/font-file-name”（主题字体）和“/wp-content/plugins/plugin-name/font-file-name”（用于插件加载的字体）。