Speculation Rules API 是开发者主动声明确定性规则以控制浏览器预渲染或预加载的机制，非AI预测工具；适用于意图明确、内容稳定、同源非敏感的链接，通过JSON配置prefetch或prerender策略，并可与instant.page兼容降级。

Speculation Rules API 不是“预测用户行为”的 AI 工具，它不分析点击流、停留时长或历史路径。它的作用是：**由开发者主动声明一组确定性规则，告诉浏览器“在什么条件下，对哪些链接执行预渲染或预加载”**。所谓“预测”，其实是基于页面结构和用户常见操作模式的合理假设，比如“分页链接大概率会被点”“主导航菜单项是高频跳转目标”。

明确适用场景：哪些链接值得加 Speculation Rules？

不是所有链接都适合。重点考虑三类：

• 用户意图明确、跳转概率高的链接：如文章页底部的“下一页”、“上一篇”，分类列表页顶部的“全部分类”导航，搜索结果页的分页数字。
• 内容稳定、资源体积可控的页面：避免对含大量动态 JS、第三方广告或实时数据的后台页使用预渲染，否则可能白忙一场甚至引发副作用。
• 同源、非敏感、无需登录态校验的页面：跨域页面不支持；需登录才能访问的页面，预渲染后可能因鉴权失败而空白或报错。

用 JSON 声明规则：比写一堆 <link rel="prefetch"> 更清晰

把规则写成一段内联脚本，放在 <head> 中即可（WordPress 6.8+ 已自动注入，无需手动）：

<script type="speculationrules">
{
"prefetch": [
{ "source": "list", "urls": ["https://yoursite.com/blog/", "https://yoursite.com/about/"] }
],
"prerender": [
{ "source": "document", "selector": "a.next-page, a.prev-page" }
]
}
</script>

说明：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

立即学习“前端免费学习笔记（深入）”；

• "prefetch"：仅下载 HTML 和关键资源（JS/CSS），不解析执行，适合较重页面或带权限判断的页面。
• "prerender"：在隐藏 iframe 中完整加载、解析、执行并渲染整个页面，点击瞬间即切换，体验最接近 SPA。
• "source": "document" + selector：直接从当前 DOM 中抓取匹配链接，免去硬编码 URL，维护成本低。

与 instant.page 配合使用，兼顾兼容性与体验

并非所有浏览器都支持 Speculation Rules（目前 Chrome 120+、Edge 120+、Opera 稳定支持；Firefox 尚未启用）。这时可以搭配轻量脚本 instant.page：

• 它会自动检测浏览器是否支持 Speculation Rules；支持则调用原生 API，不支持则退回到 <link rel="prefetch"> 或 fetch 预加载。
• 默认 65ms 悬停延迟，避免误触发；只对鼠标悬停和触摸开始事件响应，不干扰键盘导航或屏幕阅读器。
• 只需在 <head> 引入一行：<script src="https://cdn.jsdelivr.net/npm/instant.page@5.1.1" type="module" defer integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jFVmsSibVXNo02Zb9WF70v..."></script>

别忽略基础前提：预加载效果取决于页面本身是否可优化

Speculation Rules 再强大，也无法加速一个本身就很慢的页面。确保以下几点已就绪：

• 目标页面首屏 HTML 小于 100KB，关键 CSS 内联，JS 延迟加载或模块化拆分。
• 服务器开启 HTTP/2 或 HTTP/3，支持 Early Hints（103 Early Hints），让浏览器更早获取资源线索。
• 静态资源（图片、字体、CSS/JS）配置了合理的 Cache-Control 头，避免重复下载。
• 禁用不必要的 WordPress 插件钩子、冗余 REST API 调用，减少 PHP 渲染耗时。