WordPress性能团队最近发布Speculative Loading预渲染插件

WordPress 性能团队最近发布了一个名为“Speculative Loading”的新插件，该插件使用一个新的技术能够自动在页面上预渲染某些 URL，从而实现近乎即时的页面加载时间。该功能由推测规则API提供支持，这是一个新的 Web API，允许定义要预取或预渲染的 URL 类型的规则。您可以通过在 WP Admin后台管理中搜索“推测性加载”或通过Performance Lab 插件来安装该插件。

WordPress 中预取和预渲染的简史

WordPress 核心多年来一直提供简单的资源提示 API，该 API 允许将<link>标签注入HTML文档，该标签可用于预取或预渲染某些资源以及其他操作。虽然预取对于 HTML 文档的某些子资源（例如第三方脚本提供程序）很有用，但预渲染最多可以处理资源并已经在屏幕外执行一些渲染，因此对于整个网页也很有用。

然而，使用注入标签的方法link[rel="prefetch|prerender"]不是很灵活，因为需要在加载 HTML 后立即定义要预取或预渲染的 URL。为用户可能在页面上单击的每个潜在锚链接提供<link> 标签将是一种浪费，而不提供任何标记会错过性能优化的绝佳机会。到目前为止，像Quicklink这样的解决方案可以用来动态插入<link>标签来预取用户视口中的资源，这更加灵活，但仍然很不理想，因为它仍然可能过度预取太多资源并且需要JavaScript库。

但更重要的是，它实际上link[rel="prerender"]并不支持预渲染，因为“预渲染”值实际上用于称为NoState Prefetch的东西，这意味着它仍然只预取某些资源而不是预渲染它们，例如，这将包括运行 JavaScript。最后但并非最不重要的一点是，“预渲染”值此时已被弃用。

Speculation Rules API简介

Speculation Rules API是一个新的 Web API，可以解决上述问题，也就是预渲染的意思。它允许定义规则，以基于用户交互以JSON语法动态预取和/或预渲染特定结构的 URL，或者换句话说，在导航之前推测性地预加载这些 URL。例如，每当用户将鼠标悬停在页面上的任何链接时，可以使用此 API 来预呈现页面上的任何链接。此外，对于推测规则 API，“预渲染”实际上意味着预渲染整个页面，包括运行 JavaScript。一旦用户单击链接，这可能会导致近乎即时的加载时间，因为页面很可能已经完全加载。然而，这只是可能的配置之一。

以下代码示例显示了推测规则 API JSON 规范的一般语法，并概述了预呈现 WP 管理员或登录 URL 之外的任何链接的配置。

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

Speculation Rules API允许定义URL 模式，哪些类型的 URL 应该符合推测加载的条件。可以将规则配置为预取或预呈现某些URL模式。还可以指定所谓的“急切”值，该值指示应如何急切地应用预取或预渲染。例如，当用户将鼠标悬停在链接上时，“moderate”值会触发推测加载。 “conservative”值会延迟此操作，直到用户单击链接（这仍然提供了不错的性能优势），而“eager”值一旦有最轻微的建议用户可以单击该链接，就会立即执行。请注意，建议谨慎使用“eager”配置，因为它会增加浪费加载 URL 的可能性。

浏览器支持

虽然Speculation Rules API自版本 109 以来已在 Chrome 和 Edge 中可用，但解锁上述功能所需的特定子功能称为“文档规则”，该功能最近才在版本 121 中添加。

换句话说，在撰写本文时，最终用户将需要使用 Chrome 121+ 或 Edge 121+ 才能获得此功能的好处。然而，对于其他浏览器的用户来说不会有任何不利影响，因为这是一个渐进的增强。因此，无论用户群如何，在您的网站上使用推测规则 API 都是安全的。

推测规则 API在 W3C 网络标准会议 TPAC 2023 上提出，并获得积极反响。目前，该标准正处于草案阶段。已请求关于Firefox和Safari API 的立场。

推测性加载 WordPress 插件

正如本文开头提到的，WordPress 性能团队最近发布了一个新功能插件“推测性加载”，该插件可以推测性加载页面上链接的其他前端 URL。它插入一个类似于前面的代码示例的 JSON 脚本。默认情况下，页面上链接的任何 URL 都会以“中等”的渴望度配置进行预呈现，这通常会在将鼠标悬停在链接上时触发。因此，激活插件后您不需要执行任何操作：它开箱即用。该插件还提供了一些自定义选项，可以根据网站所有者的偏好调整行为。

可以通过“设置”>“阅读”屏幕中的新“推测性加载”部分来修改默认行为。例如，如果站点使用的 JavaScript 尚未适合在预渲染时加载，则可以将插件配置为仅预取文档。人们可以将渴望设置为“保守”，以减少在用户未导航到 URL 的情况下加载 URL 的可能性。或者，可以将其设置为“渴望”，以增加在用户登陆链接 URL 时推测加载已经完成的机会，但这存在浪费加载多个资源的风险。默认的“中等”在可持续性和性能之间取得了良好的平衡。

可以使用名为“plsr_speculation_rules_href_exclude_paths”的过滤器来自定义要推测预加载的 URL 类型的规则。例如，将 URL 添加到 WordPress 站点（仅在加载时修改用户状态）的插件可以使用该过滤器来排除这些 URL 进行预呈现或预取。 

下面是一个代码示例，它将确保 URL 类似https://example.com/cart/或https://example.com/cart/foo/将被排除在预取和预渲染之外：

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

有关过滤器的详细信息，请参阅插件的常见问题解答。