推测性加载是怎么提高WordPress网站的页面速度的？

如今的网页上充斥着图像、视频和其他有趣的内容，有时会导致加载缓慢。

想要让您的网页更快吗？尝试在用户打开网页之前对其进行预渲染或预取。这样，您的内容就可以随时使用，为访问者提供无缝且快速的浏览体验。Speculative Loading API 解决了以前未解决的问题。过去，解决方案侧重于预取 JavaScript 和 CSS 等资源，但不涉及预渲染整个网页。

2024 年初，谷歌的 Adam Silverstein 提到 WordPress Performance 团队正在开发一个插件来启用 Speculation Rules API。

2024年4月，WordPress官方发布了支持Speculation Rules API的性能插件Speculative Loading。

什么是推测规则 API？

推测规则 API 允许开发人员定义预渲染和预取内容规则。

通过在用户导航到页面或资源之前在后台加载页面或资源，这有助于缩短页面加载时间。

API 控制哪些页面应该预渲染以及在什么条件下预渲染，从而实现更高效的资源利用和更流畅的用户体验。

推测加载机制

1. 预取指示浏览器下载引用页面的主要内容而不获取其子资源。这可加快用户导航到预取页面时的加载时间。

标签： <link rel=”prefetch”…>

2. 预渲染更进一步，指示浏览器获取、渲染和加载所有内容（包括子资源和 JavaScript）到一个不可见的选项卡中，当用户进入该选项卡时，该选项卡将在大约 50 毫秒内加载。

标签： <link rel=”prerender”…>

在 WordPress 中使用推测加载 API 的系统要求

如何使用 WordPress 中的推测加载？

推测规则可以添加在主机的头部或者主体中。

您可以通过两种格式添加推测加载 API：

1. 静态设置，您可以在此处添加静态页面 URL。这对于下一步操作非常可预测的网站非常有效。

2.使用 JavaScript 进行动态设置。这适用于大量使用个性化用户体验的网站。

让开发人员和网站所有者更具体地了解应该预渲染哪些 URL。

方法 1：使用 Speculative Loading 插件

1. 登录您的 WordPress 仪表板。
2. 导航到插件 > 添加新插件。 
3. 搜索推测加载插件。
4. 单击立即安装并激活。

当您安装插件时，它会自动以中等程度的预渲染设置预渲染链接页面。当您将鼠标悬停在链接上时，就会发生这种情况。因此，激活插件后，您无需执行任何操作；它会自动运行。

如果需要，您可以更改“设置”>“阅读”下的“推测加载”部分。

例如，如果您在 WordPress 网站上安装了 Speculative Loading 插件，则可以使用 Chrome DevTools检查该网站。

点击元素选项卡，向下滚动，您会看到已经添加的script type=”speculationrules” ，其中包含各种推测规则。

方法 2：使用 cPanel

1. 登录您的 cPanel 帐户。
2. 导航到文件 > 文件管理器。
3. 在public_html目录中，选择wp-content文件夹。
4. 打开主题文件夹，然后选择您的活动主题文件夹。
5. 搜索header.php，右键单击它并选择编辑。
6. 添加代码（参考方法3中提到的代码）。

方法 3：使用 WordPress 仪表板

1. 登录您的 WordPress 仪表板。
2. 转到外观 > 主题文件编辑器。
3. 搜索header.php (主题标头) 文件。

1. 添加以下代码，单击“更新文件”保存更改：

   静态设置代码

   预渲染：

         <script type="speculationrules">
       {
       “预渲染”：[
       {
       “来源”：“列表”，
       “urls”：[“shop”，“test”]
       }
       ]
       }
       </script>

   预取：

   预取也是如此，它通常是预渲染之前的一个很好的起点：

        <script type="speculationrules">        
       {
       "预取"：[
       {
       “urls”：[“示例页面”，“test1”]
       }
       ]
       }
       </script>

   动态设置代码

       <script type="speculationrules">
       {
       “预渲染”：[
       {
       “来源”：“文件”，
       “在哪里”： {
        “和”： [
         {
         “href_matches”：“/*”
          }，
          {
          “不是”： {
          "href_matches": [
          “/wp-login.php”
          “/wp-admin/*”
          ]
          }
          }
          ]
          }，
          “渴望程度”：“中等”
          }
          ]
          }
         </script>
   

在上面的代码片段中，页面上的所有 URL 都已准备好进行预渲染，但转到 WordPress 登录和管理页面的 URL 除外。您还可以设置预渲染的程度。

1. 立即：当它看到规则时会尽快进行猜测。
2. Eager：与immediate设置类似，但未来Google计划将其速度提高到比medium快，但不会像immediate那么快。
3. 中等：悬停 200 毫秒
4. 保守：鼠标或触地

当您使用推测规则 API 时，您可以在检查页面时使用 Chrome应用程序选项卡中推测加载的后台服务进行检查。

重要笔记：

立即和急切设置不依赖于用户操作，因此它们具有更高的限制。它们可以通过删除较旧的预渲染页面来动态调整容量。

对于中等和保守的设置，您最多可以预渲染 2 个页面。这些页面由用户操作触发，并遵循先进先出 (FIFO) 规则。如果您预渲染第三个页面，它将替换第一个页面以节省内存。

如何阻止某些 URL 预取和预渲染？

值得注意的是，WP-admin路由默认会自动排除在预渲染和预取之外。

您可以使用plsr_speculation_rules_href_exclude_paths过滤器推测性地设置要预加载的 URL 类型的规则。

以下代码示例可确保 https://wordpresssite.com/cart/ 或 https://wordpresssite.com/cart/checkout/ 等 URL 被排除在预取和预渲染之外：

?php

添加过滤器（

'plsr_speculation_rules_href_exclude_paths'，

函数（$exclude_paths）{

$exclude_paths[] = '/购物车/*';

返回 $exclude_paths；

}

（英文）：

如果您看到一条错误消息，提示“推测规则 API 已被禁用”，请按照以下步骤在浏览器设置中启用它。

在 Chrome 中启用推测规则 API

启用推测规则 API 取决于浏览器支持情况和特定设置或标志。目前，并非所有浏览器都默认支持此功能，在某些情况下它可能仍处于实验阶段。

1. 打开 Chrome，输入chrome://flags，然后按 Enter。
2. 在搜索栏中搜索Speculation Rules API。
3. 如果出现“Speculation Rules API”选项，请将其设置为Enabled。
4. 单击重新启动按钮重新启动 Chrome 并应用更改。

安全考虑

跨站预取有限制，以保护用户隐私。只有当用户未针对目标网站设置 Cookie 时，它​​才会起作用，这有助于避免跟踪用户活动。

为什么要在您的网站上使用推测规则 API？

更好的页面加载时间、增强的用户满意度和潜在的 SEO 优势使这项技术成为开发人员的绝佳选择。

通过减少页面切换之间的延迟，用户会感觉网站更流畅、响应更快。您可以在网站的核心 Web 指标中看到这种改进，其中最大内容绘制 (LCP)、累积布局偏移 (CLS) 和下一次绘制交互 (INP) 等指标显着下降。

即时浏览可降低跳出率并提高用户留存率，这对您网站的成功至关重要。这凸显了整合 Speculation Rules API 的战略重要性。

推测加载与 WP Rocket

新的Speculative Loading是开源软件，在WordPress中，它的运行方式与WP Rocket不同。

WP Rocket 是一款高级缓存插件，可通过各种优化（如缓存、最小化和延迟加载）来提高网站速度。

推测加载可以预测用户操作来预取和预渲染内容，通过准备用户将访问的下一个页面来减少加载时间。

相比之下，WP Rocket 提供了链接预加载功能，该功能使用 JavaScript 在鼠标悬停时预加载链接。

推测加载 API 允许开发人员为浏览器设置规则，以根据对用户接下来可能点击的内容的预测来预取或预渲染链接的 URL。

推测规则 API 对分析的影响

分析对于跟踪网站使用情况（包括页面浏览量和事件）以及通过真实用户监控 (RUM) 评估性能至关重要。了解预渲染会影响分析至关重要。

例如，如果您使用的是 Google Analytics，则无需采取额外措施，因为 GA 默认会延迟预渲染直至激活。但是，使用其他分析工具时，预渲染页面可能会影响数据收集。

网站所有者可能需要添加额外的代码来确保分析仅在查看页面时激活。这可以使用Promise来实现，即使文档正在预渲染，它也会等待预渲染更改。

虽然 Google Analytics、Google Publisher Tag (GPT) 和 Google AdSense 会延迟跟踪直至页面处于活动状态，但并非所有提供商都会自动执行此操作。

为了解决这个问题，你可以设置一个 Promise，仅在页面激活时开始分析：

const whenActivated = new Promise((resolve) => {

如果（document.prerendering）{

document.addEventListener（'prerenderingchange'，resolve）；

} 别的 {

解决（）;

}

});

异步函数 initAnalytics() {

等待激活时；

// 初始化分析

}

初始化分析（）；

结论

推测性加载可通过预测用户行为并在后台预加载内容来提高 WordPress 网站的页面速度。这可缩短加载时间，为访问者带来更流畅、更高效的浏览体验。

经常问的问题

1. WordPress 中的 Speculative Loading 插件是否利用了 AI？

不，推测加载插件不使用人工智能 (AI)。相反，它使用 Google 的推测规则 API，将 JSON 脚本插入页面上链接的任何 URL，并使用“中等”热切配置对其进行预渲染。

2. 哪些页面符合推测加载的条件？

推测加载策略可应用于所有页面，但用户操作不会对其进行修改。一个好的经验法则是避免预渲染或预提取结帐和购物车页面，因为这可能会导致糟糕的用户体验。此外，Google 建议仅在用户加载页面的可能性较高（大于 80%）时才预渲染页面。

推测规则 API 支持定义URL 模式，以指定哪些 URL 应该有资格进行推测加载。