WordPress 6.8 推测性加载提升网站性能得分

WordPress 6.8 引入了一项革命性功能——推测性加载，旨在通过预加载页面内容实现近乎瞬间的页面加载速度。这一创新基于 Speculation Rules API，这是一个强大的 Web 平台工具，允许开发者精确控制哪些 URL 应被预取或预渲染，以及何时执行这些操作。若想深入了解 Speculation Rules API 的细节，可参考官方的推测性加载公告文章。

### 背景

在 WordPress 核心正式集成推测性加载之前，该功能已通过 Speculative Loading 功能插件在超过 50,000 个 WordPress 站点上成功应用。如今，这一插件已被移植至 WordPress 核心并经过优化。根据 HTTP Archive 和 Chrome 用户体验报告（CrUX）的数据分析，启用推测性加载的站点，其最大内容绘制（LCP）通过率中位数提升了约 1.9%。这一增幅虽看似微小，但对于单一功能而言已属显著，尤其考虑到数据涵盖了性能差异显著的各类站点。

### Speculative Loading 的崛起

Speculation Rules API 于 2023 年初首次推出，随后使用率持续攀升。目前，超过 8% 的 Chrome 导航依赖于此 API。数月前，Cloudflare 通过 Speed Brain 功能大规模部署推测性加载，标志着又一重要里程碑。目前，Speculation Rules API 已在 Chrome、Edge 和 Opera 等主流浏览器中得到支持，意味着绝大多数用户将受益于此功能。对于不支持该 API 的浏览器，推测性加载不会产生任何负面影响，因其本质为渐进增强技术——不支持该 API 的浏览器会直接忽略，站点将保持原有行为。

### 默认行为与自定义

WordPress 核心在前端默认启用推测性加载，除非用户已登录或站点禁用了漂亮永久链接。URL 预取行为采取保守策略：仅在用户点击链接前的几分之一秒触发预取。尽管时间短暂，但足以显著提升性能。这种保守预取是 WordPress 大规模应用推测性加载的合理起点，与 Cloudflare 的配置一致，并最大限度减少无后续导航时的推测性加载。

Speculative Loading 插件默认采用中等积极性的预渲染，因更早触发和预渲染 URL 而带来更大性能提升，但也存在权衡，如可能触发用户未导航到的 URL 的客户端行为。通过操作和过滤器，可对推测性加载进行精细自定义。

### 排除 URL 模式

某些插件可能使用“操作 URL”模式，即通过 GET 请求导航到特定 URL 即触发状态更改（如电商站点的购物车或收藏功能）。这类模式虽不推荐，但需确保此类 URL 被排除在预取和预渲染外。默认情况下，含查询参数的 URL 会自动排除，满足多数需求。若插件使用自定义重写规则，可通过 `wp_speculation_rules_href_exclude_paths` 过滤器排除特定路径，如 `/cart/*`。

### 修改默认配置

站点可通过 `wp_speculation_rules_configuration` 过滤器调整推测性加载配置。默认值为 `array( ‘mode’ => ‘auto’, ‘eagerness’ => ‘auto’ )`，实际为保守预取。以下示例将积极性提升至 `moderate`，在提升性能的同时增加无后续导航的权衡：

“`php
add_filter( ‘wp_speculation_rules_configuration’, function ( $config ) {
if ( is_array( $config ) ) {
$config[‘eagerness’] = ‘moderate’;
}
return $config;
});
“`

`mode` 可选 `auto`、`prefetch` 或 `prerender`，`eagerness` 可选 `auto`、`conservative`、`moderate` 或 `eager`。`immediate` 值虽定义于 API，但强烈不建议用于推测性加载，故 WordPress 核心不支持。

若希望更大性能提升，可选择 `prerender` 和 `moderate` 积极性，但需注意预渲染对客户端 JavaScript 逻辑的影响。以下示例启用预渲染并排除特定 URL：

“`php
add_filter( ‘wp_speculation_rules_configuration’, function ( $config ) {
if ( is_array( $config ) ) {
$config[‘mode’] = ‘prerender’;
$config[‘eagerness’] = ‘moderate’;
}
return $config;
});
“`

对于禁用漂亮永久链接的站点，默认禁用推测性加载。但若确认无问题或已排除特定查询参数，可通过过滤器启用：

“`php
add_filter( ‘wp_speculation_rules_configuration’, function ( $config ) {
if ( ! $config && ! get_option( ‘permalink_structure’ ) ) {
$config = array( ‘mode’ => ‘auto’, ‘eagerness’ => ‘auto’ );
}
return $config;
});
“`

### 包含额外推测规则

Speculation Rules API 支持多规则配置。默认情况下，WordPress 核心仅含主规则。通过 `wp_load_speculation_rules` 操作，可添加自定义规则，如以下示例：

“`php
add_action( ‘wp_load_speculation_rules’, function ( WP_Speculation_Rules $speculation_rules ) {
$speculation_rules->add_rule( ‘prerender’, ‘my-moderate-prerender-url-rule’, array(
‘source’ => ‘list’,
‘urls’ => array( ‘/some-url/’, ‘/another-url/’, ‘/yet-another-url/’, ),
‘eagerness’ => ‘moderate’,
) );
});
“`

也可使用文档级规则，适用于特定类别的链接：

“`php
add_action( ‘wp_load_speculation_rules’, function ( WP_Speculation_Rules $speculation_rules ) {
$speculation_rules->add_rule( ‘prerender’, ‘my-moderate-prerender-optin-rule’, array(
‘source’ => ‘document’,
‘where’ => array(
‘selector_matches’ => ‘.moderate-prerender, .moderate-prerender a’,
),
‘eagerness’ => ‘moderate’,
) );
});
“`

### 通过 UI 自定义

虽然 WordPress 核心不提供专用 UI，但许多块类型在“高级”面板中提供“附加 CSS 类”字段。内置 `no-prefetch` 和 `no-prerender` 类，可添加至块中排除特定链接的推测性加载。

### 总结与进一步阅读

WordPress 6.8 的推测性加载功能是 Web 性能的重大突破，通过预加载机制实现近乎瞬间的页面加载。通过精细配置，可进一步提升性能，满足个性化需求。