推测性加载如何提高 WordPress 网站的页面速度

如今，网页中充斥着旨在增强用户体验的图片、视频和互动元素。然而，这些东西会拖慢网页的加载时间。虽然技术一直在进步，有一个目标始终不变：性能。每个人都希望自己的网页能以闪电般的速度加载。让网页加载速度更快的一种方法是在用户浏览网页之前进行预渲染或预获取。

预渲染简史

2011 年，Chromium 团队 通过标签向 Chrome 浏览器引入了早期的预渲染形式<link rel="prerender" … >。

这样，开发人员就可以向浏览器提示用户下一步可能访问的页面。然后，浏览器会在后台静默地获取并呈现这些页面，从而大大缩短了用户浏览这些页面时的加载时间。

尽管好处多多，但这种早期的预渲染功能会占用大量带宽和 CPU 资源，而且如果用户不访问预渲染的页面，还可能导致隐私问题。此外，你还必须手动选择要预演的链接，这并不总是有效或可行的。

为了解决其中一些问题，Chrome 弃用了使用链接rel=prerender提示的预渲染，转而使用NoState Prefetch 方法，该方法涉及在不执行 JavaScript 或其他潜在侵犯隐私的操作的情况下获取页面资源。NoState Prefetch 方法改进了资源加载，但无法像完整预渲染那样提供即时页面加载。

推测规则 API 简介

推测规则 API是 一个新的实验性 JSON 定义的 API，它在导航到 URL 之前推测性地预加载 URL，从而缩短渲染时间并改善用户体验。

该 API 使开发人员能够使用 JSON 格式定义的结构来配置规则，script type="speculationrules"浏览器可以使用该结构来决定应预渲染哪些 URL。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

在预取时也是如此，预取通常是预渲染的第一步：

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["firstpage.html", "secondpage.html"]
    }
  ]
}
</script>

上面的代码片段显示了推测规则 API 如何通过指定要预取或预渲染的 URL 列表来工作。最近，Google 宣布了对推测规则 API 的新改进，现在提供了使用文档规则自动查找链接的选项。这是通过根据条件从文档中获取 URL 来实现的where。

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*"
              ]
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

在此代码片段中，页面上的所有 URL 都被考虑进行预渲染，除了那些指向WordPress 登录和管理页面的 URL。还可以指定级别eagerness– eager（立即）、moderate（悬停 200 毫秒）和conservative（鼠标或触地时）。

CSS选择器也可以用作替代方案或与匹配项结合href使用来查找当前页面上的链接：

<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": {
      "and": [
        { "selector_matches": ".prerender" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

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

还有更多内容，我们将在调试部分进行研究。

浏览器支持

从特定版本开始， 基于Chromium 的现代浏览器（包括 Chrome 和 Edge）都支持推测规则 API。

由于 API 是渐进式增强工具，因此可确保使用受支持浏览器的用户受益于更快的加载时间，而使用其他浏览器的用户则不会受到任何负面影响。

推测性加载 WordPress 插件

为了享受 WordPress 中推测规则 API 的优势，WordPress 性能团队 （包括来自 Google 的开发人员）最近发布了推测加载插件。该插件支持推测加载页面上链接的前端 URL。

到目前为止，由于应用程序接口仍处于早期阶段，该插件的采用率较低，但也获得了一些好评。

默认情况下，该插件配置为当用户将鼠标悬停在相关链接上时预呈现 WordPress 前端 URL。这可以通过设置 >阅读 下的推测加载部分进行自定义。

这意味着页面上链接的任何 URL 都会使用eagerness的配置进行预渲染moderate，该配置通常在将鼠标悬停在链接上时触发。因此，激活插件后您无需执行任何操作；它开箱即用。

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

它使用 Regex 来指定应该预渲染的链接，指定不预渲染的链接，并设置渴望程度。下文将详细解释这些规则。

防止某些 URL 预获取和预呈现

需要注意的是， 默认情况下， WP-admin路由被排除在预渲染和预取之外。作为一名WordPress 开发人员，可以决定想要优先考虑的路线。

可以使用plsr_speculation_rules_href_exclude_paths过滤器自定义推测预加载的 URL 类型的规则。

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

<?php
 
add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

调试 WordPress 网站的推测规则

由于预渲染页面是在单独的渲染器中渲染的，就像一个隐藏的背景标签页，激活后会取代当前标签页，因此调试推测规则可能会很棘手。Chrome 浏览器团队在 DevTools 方面做了大量工作，让你可以使用它们进行调试。

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

在这里，可以看到页面上的五个链接可以根据与在 Speculative rules JSON 中设置的规则相匹配的 URL 进行预渲染，如下所示。注意，我们不需要列出所有 URL；文档规则允许浏览器从页面上的相同来源链接中获取这些 URL。

一些链接的 “状态 “显示为 “未触发”这些链接的预渲染过程尚未开始。不过，当我们将鼠标悬停在页面上的链接上时，就会看到状态随着每个 URL 的预渲染而改变。

Chrome 浏览器对预渲染设置了限制，包括中度急切最多只能预渲染两次，因此在将鼠标悬停在第三个链接上后，我们会看到该 URL 的失败原因：

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

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

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

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

现在，使用 DevTools 检查页面并导航到“推测性加载”选项卡时，操作将 针对各种 URL 进行预取，并且规则也会发生变化。

将鼠标悬停在链接后导航到“网络”选项卡时，预取的资源将显示在最后，如“类型”列 所示 。这些资源以最低优先级获取，因为它们是为了将来的导航，并且 Chrome 会优先考虑当前页面的资源。

推测规则 API 对分析的影响

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

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

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

// Promise to activate analytics on page activation for prerendered pages
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve);
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialize analytics
}

initAnalytics();

总结

本文解释什么是 Speculative Rules API、它是如何工作的，以及如何在 WordPress 网站上使用它。它仍是一项试验性功能，但已逐渐得到广泛采用。推测规则仍然仅限于同一标签页中的页面，但正在努力减少这些限制。