全面了解Speculation Rules API在 WordPress 中的应用及其影响

为了利用 WordPress 中的Speculation Rules API（推测规则API），WordPress 性能团队（包括来自 Google 的开发人员）最近发布了一款推测加载插件。这个插件可以预加载页面上链接的前端 URL，从而提高网页加载速度。

默认情况下，这个插件会在用户将鼠标悬停在相关链接上时预渲染 WordPress 前端 URL。你可以在“设置”>“阅读”>“推测加载”部分自定义这些设置。

在 WordPress 管理设置中自定义推测加载插件非常简单。这意味着页面上的任何链接都会根据预设的“中等” eagerness 配置进行预渲染，当你将鼠标悬停在链接上时，它就会开始预渲染。因此，激活插件后，你无需做任何额外操作；它可以立即使用。

例如，如果你在 WordPress 网站上安装了推测加载插件，可以使用 Chrome DevTools 检查站点并点击“Elements”选项卡。当你向下滚动时，你会注意到已经为你添加了各种推测规则，例如 <script type="speculationrules">。

该插件使用正则表达式来指定需要预渲染的链接、排除不预渲染的链接，并设置预渲染的急切度。以下部分详细解释了这些规则。

防止过度使用的限制

Chrome 设置了一些限制来防止 API 被过度使用：

这些限制是基于急切程度和用户交互来设定的。

• immediate 和 eager：这些设置不依赖用户操作，因此限制较高。它们允许动态调整容量，通过移除旧的预渲染来增加新的预渲染。
• moderate 和 conservative：这些设置由用户操作触发，遵循先进先出 (FIFO) 原则，上限为 2。当新的预渲染被添加时，会替换掉最旧的预渲染，以节省内存。

防止某些 URL 预获取和预渲染

注意：默认情况下，WP-admin 路由会被排除在预渲染和预取之外。作为 WordPress 开发人员，您可以选择哪些路由需要优先处理。

你可以使用过滤器 plsr_speculation_rules_href_exclude_paths 来自定义哪些 URL 类型需要被排除在推测预加载之外。

以下代码示例确保类似于 https://wordpresssite.com/cart/ 或 https://wordpresssite.com/cart/book/ 的 URL 不会被预取和预渲染：

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths) {
    $exclude_paths[] = '/cart/';
    $exclude_paths[] = '/cart/book/';
    return $exclude_paths;
});

你可能希望从预渲染中排除某些 URL，但仍然允许预取。例如，使用客户端 JavaScript 更新用户状态的页面可能不适合预渲染，但预取是合理的。

plsr_speculation_rules_href_exclude_paths 过滤器接收当前模式（prefetch 或 prerender），以便进行条件排除。

例如，以下代码确保类似 https://wordpresssite.com/products/ 的 URL 无法被预渲染，但仍然可以预取：

add_filter('plsr_speculation_rules_href_exclude_paths', function($exclude_paths, $mode) {
    if ($mode === 'prerender') {
        $exclude_paths[] = '/products/';
    }
    return $exclude_paths;
}, 10, 2);

调试 WordPress 网站的推测规则

调试推测规则可能会比较棘手，因为预渲染的页面是在一个单独的渲染器中渲染的，就像一个隐藏的后台标签页，在激活时会替换当前标签页。为了解决这个问题，Chrome 团队在 DevTools 中做了很多改进，使调试更加方便。

在 Chrome DevTools 中，导航到“应用程序”选项卡，然后向下滚动到“推测性负载”部分。这里为开发人员提供了关于推测、预渲染的 URL、失败的 URL 等详细信息。

你可以看到页面上有五个链接可以根据推测规则 JSON 中的设置进行预渲染。你不必列出所有 URL；文档规则允许浏览器从页面上的相同来源链接中自动获取这些内容。

某些链接的“状态”显示为“未触发”，这意味着这些链接的预渲染过程尚未启动。当我们将鼠标悬停在页面上的链接上时，会看到每个 URL 的状态在预渲染时发生变化。

Chrome 对预渲染设置了限制，例如 moderate 模式下最多只能预渲染两个 URL。因此，当我们将鼠标悬停在第三个链接上时，会看到该 URL 的预渲染失败原因。

还可以使用右上角的下拉菜单或选择面板顶部的 URL 并选择Inspect来切换 DevTools 面板使用的渲染器：

此下拉列表（以及所选的值）在所有其他面板（例如“网络” 面板）之间共享，你可以在其中看到正在请求的页面是预渲染的页面：

或者Elements 面板，可以看到页面内容：

就像你可以调试预渲染页面一样，你也可以调试预取页面。对于“推测性加载”插件，请确保选择“预取”作为“推测模式”。

现在，当你使用 DevTools 检查页面并导航到“推测性加载”选项卡时，你会看到各种 URL 被预取，并且相应的规则也会发生变化。

当你将鼠标悬停在链接上并导航到“网络”选项卡时，预取的资源会显示在列表的末尾，如“类型”列所示。这些资源以最低优先级获取，因为它们是为未来的导航准备的，Chrome 会优先加载当前页面所需的资源。

推测规则 API 对分析的影响

分析对于跟踪网站使用情况（如页面浏览量和事件）以及通过真实用户监控 (RUM) 评估性能至关重要。需要注意的是，预渲染可能会影响分析数据。

例如，使用推测规则 API 可能需要额外的代码，以确保仅在实际访问预渲染页面时激活分析。尽管 Google Analytics、Google 发布商代码 (GPT) 和 Google AdSense 会延迟跟踪直至页面处于活动状态，但并非所有分析提供商都默认这样做。

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

document.addEventListener('prerenderingchange', function(event) {
    if (!event.isPrerendering) {
        // 初始化分析代码
    }
});

总结

本文介绍了什么是推测规则 API、它的工作原理以及如何在 WordPress 网站上使用它。虽然它仍然是一个实验性功能，但正逐渐被广泛采用。

该插件利用预加载页面上的链接，使页面在用户将鼠标悬停在链接上时预渲染相应的 URL。用户可以在 WordPress 设置中轻松自定义预渲染规则。插件使用正则表达式来设置需要预渲染的链接，并有相应的机制防止过度使用。