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

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

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

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

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

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

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

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

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

防止过度使用的限制

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

急切度预取数量预渲染数量
立即/渴望 (immediate/eager)5010
温和/保守 (moderate/conservative)2 (先进先出)2 (先进先出)

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

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

防止某些 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 过滤器接收当前模式(prefetchprerender),以便进行条件排除。

例如,以下代码确保类似 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 网站的推测规则

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

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

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

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

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

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

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

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

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

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

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

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

或者Elements 面板,可以看到页面内容:

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

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

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

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

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

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

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

推测规则 API 对分析的影响

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

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

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

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

总结

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

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

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/9828/

(1)
上一篇 2天前
下一篇 1天前

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!