如何在 WordPress 中预加载关键请求？检查我的简单指南！

已发表: 2024-10-10

如何在WordPress中预加载关键请求？这是你的问题吗？那么，您想修复 Google PageSpeed Insights 工具给出的这个建议吗？让我指导您解决此问题，以便您可以提高网站的性能。

什么是预加载关键请求，如何在 WordPress 中完成？如何通过这个与速度相关的因素来提高核心 Web Vitals 分数？如果这些问题在您脑海中响起，请放松。

预加载关键请求并不复杂。简单来说，这意味着告诉浏览器在页面加载期间优先考虑特定资源，例如图像、字体等。这可确保您的用户立即获取信息，不会造成延误。

当您满足读者的需求时，Google 将祝福您在 SERP（搜索引擎结果页）中排名靠前。这就是为什么我们应该启用预加载关键请求。下面，我将解释这是如何实现的以及如何做到这一点。那么，让我们详细了解一下吧！

WordPress 上的“预加载密钥请求”是什么意思？

您必须了解浏览过程的工作原理才能理解预加载密钥请求。因此，当我们访问某个页面时，浏览器会向服务器发送一系列请求，以获取图像、样式表、字体和脚本等资源。

然后，服务器响应这些请求，但需要一段称为“首字节时间”(TTFB) 的特定时间。服务器响应后，我们的浏览器渲染文件以显示在屏幕上，并且预加载关键请求现在可以工作。

通过预加载关键请求，我们告诉浏览器首先渲染特定文件，例如字体、图像、视频等，以便访问者可以轻松访问内容。我希望你现在清楚了；让我们进一步研究这个话题！

预加载关键请求重要吗？

您可能想知道预加载密钥请求是否重要。答案是肯定的！为什么他们不会呢？

正如我所解释的，预加载告诉我们的浏览器比其他文件更早加载特定文件，从而使用户能够快速获取所需的信息。这反过来又改善了用户体验，这是谷歌在确定网站排名时考虑的最重要因素之一。

我希望您知道“Google 的核心排名系统希望奖励提供良好页面体验的内容。”

如何在 WordPress 中预加载关键请求？手动解决方案

在 WordPress 上预加载关键请求有两种方法。第一个是手动的，使用网站标题中的预加载属性，另一个使用插件。

尽管这两种选择都有效，但我认为使用插件可以更好地节省时间，特别是当您获得相同的结果时。不过，别担心——选择权在你手中。为了给您提供帮助，我将详细分享这两种方法。

以下是用于在 WordPress 网站上预加载关键资源的脚本。将这些代码添加到 HTML 部分，预加载密钥请求过程将开始。

预加载图像：

 <link rel="preload" as="image" href="URL_of_your_image" as="image">

预加载 Google 字体：

 <link rel=”preconnect”      href=”https://fonts.gstatic.com”      crossorigin /> <link rel=”preload”      as=”style”      href=”$fontURL&display=swap” /> <link rel=”stylesheet”      href=”$fontURL&display=swap”      media=”print” onload=”this.media='all'” /> <noscript>  <link rel=”stylesheet”        href=”$fontURL&display=swap” /> </noscript>

预加载 CSS：

 <head> <link rel="preload" href="/path/to/your/library.js" as="script"> </head>

预加载 JavaScript：

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

使用插件在 WordPress 中预加载关键请求

我已经尝试了很多预加载密钥请求的插件。尽管许多人声称可以完成这项任务，但实际上很少有人能真正做到这一点。

例如，WPRocket 提供了预加载链接和字体的功能，而 Litespeed 缓存仅预加载链接。

这就是我选择 Perfmatters 的原因。它预加载链接、图像、CSS、JSS 以及所有内容，以提供更好的用户体验。

首先，安装预加载插件。请记住，它是付费的，因此您必须选择一种订阅计划才能访问。

激活插件后，在仪表板中选择“ Perfmatters ”，然后选择第三个选项“预加载”。

此页面上有不同的选项，例如启用即时页面、预加载、预加载关键图像等。可用于预加载的功能包括：

启用即时页面：此功能允许您的浏览器在后台预取和预渲染网页。当用户将鼠标悬停在链接上或单击链接时，下一页将立即加载，从而创造无缝的体验。
预加载：预加载选项可让您指定应首先加载哪些资源，从而使您能够控制站点的优先级。在“选择类型”下，您可以预加载图像、字体、视频等。您还可以灵活选择设备类型。
预加载关键图像：使用此选项，您可以选择要预加载的关键图像数量，通常在 0 到 5 之间。我建议将其设置为 2 或 3，以获得最佳性能，而不会使浏览器过载。

常见问题解答

预载是好是坏？

预加载通常是好的。通过启用图像、字体和脚本的预加载，您可以确保访问者快速加载页面，从而带来良好的用户体验。

如何在 WordPress 中预加载字体？

您可以通过将脚本添加到 HTML 部分或使用 Perfmatters 或任何其他插件来手动在 WordPress 中预加载字体。对于手动过程，请将此代码粘贴到页面的<head>部分：

 <link rel=”preconnect”      href=”https://fonts.gstatic.com”      crossorigin /> <link rel=”preload”      as=”style”      href=”$fontURL&display=swap” /> <link rel=”stylesheet”      href=”$fontURL&display=swap”      media=”print” onload=”this.media='all'” /> <noscript>  <link rel=”stylesheet”        href=”$fontURL&display=swap” /> </noscript>

预加载的缺点是什么？

预加载的唯一缺点是过度使用此功能会使页面加载速度变慢。这是因为浏览器必须加载的资源越多，它就会变得越不堪重负。最好的解决方案是仅启用必要的预加载元素。

总结

在 WordPress 上预加载关键请求肯定会通过获取字体和脚本等基本资源来提高页面速度。由于它们加载得更早，并且您为访问者提供了更快的交互，因此更容易提高网站的 SEO 性能。

对于您的问题“如何在 WordPress 中预加载关键请求？”，我给出了两个答案。使用手动方法和一个很棒的插件。但是，决定取决于您。我建议使用 Perfmatters 等插件来更快地完成工作。

您还可以使用 WPRocket 或其他预加载插件，例如 Nitropack。但是，在选择任何计划之前，请检查它可以预加载的功能和元素。另外，请确保它在您的预算之内。如果您需要帮助加快您的网站速度，只需发送电子邮件即可！