如何使用推测规则 API 立即加载网页

2024 年即将成为即时加载成为网络性能新标准的时刻，在线业务主们都密切关注着这一变化。

然而，从快速到即时的转变已经酝酿了一段时间了。

早在 2009 年，为了追求更快、更高效的页面加载，Chromium 团队就创建了第一个资源提示，后来添加了 link rel=”prerender”。

预计它将对性能产生重大影响，因为它涉及在用户导航到后续页面之前在后台加载后续页面，以确保在转换时更快地呈现。

然而，这个版本的预渲染功能被证明不够高效，已于 2017 年被弃用。

快进到今天，谷歌推出了其推测规则 API 的有希望的开发，允许采用更复杂的方法进行完全预渲染并解锁真正无缝的网页浏览。

什么是 Google 的推测规则 API？

Speculation Rules API是Google 开融合数据库发的一套 JSON 定义的 API，旨在通过推测加载策略来增强网页加载的性能。

推测性加载涉及预测和预加载后续页面导航所需的资源，从而缩短渲染时间并改善用户体验。Google 推出此 API 是为了向开发者提供一种更灵活、更具表现力的方式来指定应预取或预渲染哪些文档。

关于推测规则 API 的关键细节：

定位文档 URL：与定位特定资源文件的传统预取机制不同，推测规则 API 专注于文档 URL。这使得它特别适合多页应用程序 (MPA)，而不是单页应用程序 (SPA)。

预渲染和预取： API 支持预渲染和预取策略。预渲染涉及获取、渲染和加载内容到不可见的选项卡中，以便在用户导航到页面时几哥斯达黎加7天自由行（带地图和住宿指南）乎立即激活。另一方面，预取会下载并保存指定的页面资源（例如文档、图像、脚本等），从而优化用户稍后导航到这些页面时的加载时间。
浏览器支持：该 API 目前兼容所有基于 Chromium 的浏览器，包括 Chrome、Edge、Opera、Chrome Android、Opera Android 和 WebView Android。有关完整的兼容性详细信息，请参阅Mozilla 的文档：

您还可以使用以下代码检查浏览器是否支持该 API：

推测规则 API 支持近乎即时的页面加载，从而实现无缝的浏览体验。

缩短页面加载时间、提高用户满意度和潜在的 SEO 优势是开发人员采用这项技术的令人信服的理由。

通过减少页面导航之间的延迟，用户会感觉网站更加流畅、响应更快。这在您网站的核心 Web 指标中清晰可见，其中最大内容绘制 (LCP)、累积布局偏移 (CLS)和下一次绘制交互 (INP)大幅减少。

即时浏览可带来更低的跳出率和更高的用户留存率，而这些都是在线平台成功的关键指标。这凸显了集成 Speculation Rules API 的战略价值。

Google 的 Speculation Rules API 旨在针对文档 URL，而不是特定的资源文件。Speculation Rules API 引入了一种更具表现力和可配置性的语法，用于指定应预取或预渲染哪些文档。

通过在中以 JSON 格式定义的结构script type="speculationrules"，开发人员可以明确规定预渲染和预取的规则。这种增强的灵活性允许对推测性加载进行微调。

近日，谷歌宣布在 Chrome 121 中对 Speculation Rules API 进行了新的增强，现在提供了自动查找链接的选项。

这是通过以下方式完成的：

但是，如果您是推测规则 API 的新手，我们建议您首先测试下面的不同设置。

推测规则 API 允许开发人员遵循结构化的方法来优化预渲染和预取过程。

首先创建一个脚本 type=”speculationrules” 元素，并在其中的 JSON 结构中定义推测规则。

推测规则可以添加在主机的头部或者主体中。

重要提示：子框架中的推测规则不会生效，预渲染页面中的推测规则仅在用户导航到页面本身时才会生效。

推测规则可以静态或动态地包含。