如何使用推测规则 API 即时加载网页
已发表: 2024-02-172024 年，即时加载将成为 Web 性能的新标准，在线企业主将洗耳恭听。
不过，从快速到即时的转变已经进行了一段时间。
早在 2009 年，出于对更快、更高效的页面加载的追求，Chromium 团队创建了第一个资源提示，后来添加了链接 rel=”prerender”。
它预计会对性能产生重大影响，因为它涉及在用户导航到后续页面之前在后台加载后续页面，从而确保在发生转换时更快地呈现。
然而，这个版本的预渲染并没有被证明足够高效，并于 2017 年被弃用。
快进到今天，谷歌推出了其推测规则 API 的有希望的开发，允许采用更复杂的方法来完全预渲染和解锁真正无缝的网络浏览。
什么是 Google 推测规则 API？
Speculation Rules API 是 Google 开发的 JSON 定义的 API，旨在通过推测加载策略来增强网页加载的性能。
推测性加载涉及预测和预加载后续页面导航的资源，从而缩短渲染时间并改善用户体验。 Google 引入此 API 是为了向开发人员提供更灵活、更具表现力的方式来指定应预取或预渲染哪些文档。
有关推测规则 API 的关键详细信息：
- 定位文档 URL：与针对特定资源文件的传统预取机制不同，推测规则 API 专注于文档 URL。 这使得它特别适合多页面应用程序（MPA）而不是单页面应用程序（SPA）。
- 预渲染和预取： API 支持预渲染和预取策略。 预渲染涉及获取、渲染内容并将其加载到不可见的选项卡中，以便在用户导航到页面时几乎可以立即激活。 另一方面，预取下载并保存指定的页面资源（例如文档、图像、脚本等），从而优化用户稍后导航到这些页面时的加载时间。
- 浏览器支持：该 API 目前与所有基于 Chromium 的浏览器兼容，包括 Chrome、Edge、Opera、Chrome Android、Opera Android 和 WebView Android。 有关完整的兼容性详细信息，请参阅 Mozilla 的文档：
您还可以使用以下代码检查浏览器是否支持该 API：
- 已弃用功能的替代方案：它可作为旧技术（例如已弃用的 Chrome 专用功能）的替代方案，提供更好的性能和更具表现力的语法。
- 安全考虑：跨站点预取有限制，以保护用户隐私。 仅当用户没有为目标站点设置 cookie 时，跨站点预取才会起作用，从而防止潜在的用户活动跟踪。
为什么在您的网站上使用推测规则 API？
推测规则 API 支持近乎即时的页面加载，实现无缝的浏览体验。
改进的页面加载时间、增强的用户满意度和潜在的 SEO 优势是开发人员采用这项技术的令人信服的理由。
通过减少页面导航之间的延迟，用户会认为网站更加流畅且响应迅速。 这在您网站的核心网络生命周期中变得清晰可见，其中最大内容绘制 (LCP)、累积布局偏移 (CLS) 和下次绘制交互 (INP) 急剧减少。
即时浏览体验可以降低跳出率并提高用户保留率，这是在线平台成功的重要指标。 从而强调了集成推测规则 API 的战略价值。
推测规则 API 如何工作？
Google 的推测规则 API 旨在针对文档 URL 而不是特定的资源文件。 推测规则 API 引入了更具表现力和可配置的语法，用于指定应预取或预渲染哪些文档。
通过在脚本 type="speculationrules" 中以 JSON 格式定义的结构，开发人员可以阐明预渲染和预取的规则。 这种增强的灵活性允许微调投机负载。
最近，Google 宣布在 Chrome 121 中对推测规则 API 进行了新的增强，现在提供了自动链接查找的选项。
这是通过以下方式完成的：
- 指定文档来源
- 根据 URL 或 CSS 选择器选择页面上的链接
- 指定“渴望”级别 - 渴望（立即）、中等（悬停 200 毫秒）和保守（鼠标或触摸时）
但是，如果您不熟悉推测规则 API，我们建议您首先测试以下不同的设置。
如何使用 Google 的推测规则 API
推测规则 API 允许开发人员遵循结构化方法来优化预渲染和预取过程。
设置
首先创建一个脚本 type="speculationrules" 元素，并在其中的 JSON 结构中定义推测规则。
推测规则可以添加在主机的头部或主体中。
重要提示：子帧中的推测规则不会被执行，并且预渲染页面中的推测规则仅在用户导航到页面本身时才会被执行。
推测规则可以静态或动态地包含。
- 静态设置在页面的 HTML 中完成（非常适合下一步操作具有高度确定性的网站，例如新闻网站可能想要预渲染当天的亮点）
- 动态设置通过 JavaScript 完成（适合大量使用个性化用户体验的网站）
重要提示：选择动态设置时，请务必参阅支持文档以了解未来的开发和将来可能提供的用例。
要通知浏览器要预渲染哪些 URL，您可以在页面上插入 JSON 指令：
同样，插入以下 JSON 指令进行预取：
可以向页面添加多个推测规则，在这种情况下，您可以在以下任一级别上指示浏览器：
- 网址列表
- 多重推测规则
- 一组推测规则中的多个列表
指定预渲染/预取的路由
微调推测加载涉及指定预渲染和预取的路由。 通过根据页面的重要性或用户导航的可能性对页面进行分类，开发人员可以优化推测加载策略。
然而，有一些路线被认为是不安全的，例如：
- 注销 URL；
- 语言切换 URL；
- “添加到购物车”网址；
- 服务器要求发送 SMS 的登录流程 URL，例如，当需要双因素身份验证 (2FA) 时；
- 启动服务器端广告转化跟踪的网址；
- 触发用户使用限制的 URL，例如通过使用每月的免费文章限额。
与从缓存中排除此类页面类似，避免预取和预渲染它们的原因与动态变量有关。
这些是内容敏感的页面，其中值根据用户操作进行更新，并且通过在后台预加载它们，显示页面过时状态的风险非常高。
准确性和权衡
正如 Barry Pollard 在我们的“立即加载页面”网络研讨会中提到的：
虽然预取是您可以在许多网页上复制的最安全的方法，但它也提供最低的奖励，因为它只涉及下载特定资源。
另一方面，全页预渲染提供更高的奖励，但应谨慎使用它们，因为它们可以：
- 压垮浏览器，因为它只能在后台运行有限数量的任务。
- 消耗大量带宽和 CPU 资源，这可能会导致速度较慢的网络或资源有限的设备上的用户性能下降。
- 如果访问者不导航到该页面，则会导致更高的资源浪费。
要正确设置预呈现，您应该考虑用户的行为并分析网站上的常见导航。 使用热图和 Google Analytics 流程图，您可以确定基本路线并开始预测加载实验。
要检查页面是否已预渲染，请使用PerformanceNavigationTiming的非零 activateStart条目。 然后可以使用自定义维度记录这一点：
这样，您将能够衡量预渲染和其他类型的导航之间的比率。
此外，测量随后未访问的预渲染页面的数量也很重要，以优化推测规则并实现更高的命中率和更低的资源浪费。
您可以通过在插入推测规则以指示请求预渲染时触发分析事件来执行此操作。 然后将这些事件的数量与实际预渲染页面视图进行比较。
或者你可以……
考虑使用 NitroPack 的导航 AI 进行自动页面预渲染
Navigation AI 是 NitroPack 的 AI 支持的网页浏览优化器，可主动预测和分析用户行为，以在客户旅程中预渲染完整页面。
导航 AI 使网站所有者能够在桌面和移动设备上提供即时浏览体验，而无需编写一行代码，从而提高客户参与度和转化率。
注意： Navigation AI 是一个单独的产品，但它与 NitroPack 100% 兼容，并进一步扩大了网站所有者的利益。
加入 Navigation AI 的候补名单并解锁网站上的即时用户体验 →
NitroPack 的导航 AI 基于推测规则 API 构建，并提供自动化解决方案，以在预渲染场景中实现高命中率和资源效率。
通过基于数据对页面加载应用人工智能增强的初始预测并分析用户行为，导航人工智能可以调整预测并准确指示推测规则 API 预渲染实际将访问的页面。
由于该页面已在后台绘制，因此结果是瞬时页面加载。 在移动设备上，导航 AI 依赖于识别用户在页面上的位置，并且考虑到较小的视口，它可以轻松预测他们将点击的位置。
基于 1,200 个网站，Navigation AI 已经显示出惊人的结果。
- 结果#1：使用 Navigation AI 的网页始终显示约 2.86 秒的加载时间，而没有使用 Navigation AI 的网页则为 6.12 秒
- 结果 #2：使用 Navigation AI，预渲染页面的 LCP 提高了 85%（从 3.1 秒到 0.4 秒），CLS 提高了 80%（从 0.3 秒到 0.06 秒）。 对于预取页面，Navigation AI 将 LCP 提高了 52%（从 3.1 秒缩短到 1.5 秒）。
- 结果 #3：借助 Navigation AI，整个网站的性能指标显着提高：LCP 提高 15%，CLS 提高 8%，TTFB 提高 26%
加入我们的候补名单即可使用 Navigation AI →
推测规则 API 和 WordPress
在我们的“即时页面加载”网络研讨会中，Google 的开发者关系工程师 Adam Silverstein 透露，WordPress 核心性能团队正在致力于新的推测规则 API 的更稳定的实现。
目前，重点仍然是让生态系统中的网站所有者和开发人员可以使用 API 的一小部分功能，以在将其成为核心的一部分之前测试效率和采用率。 以下是 WordPress 用户迄今为止可以利用的功能：
- Performance Lab 插件中的一个模块
- 仅实现推测规则 API 前端的独立插件（应用保守的“渴望”级别，但开发人员可以自由修改行为）
默认情况下，WP 管理路由被排除在外，但由 WP 开发人员确定他们想要优先考虑的路由。
WordPress 核心性能团队还致力于在生态系统的插件中实现更复杂的实现。 这样做的目的是减轻开发人员在确定哪些路线是最优先、哪些路线不可行时必须做的一些繁重工作。
投机规则将有哪些改进
目前，推测规则仅限于同一选项卡内的页面，但正在努力减少这些限制。
默认情况下，预渲染仅限于同源页面。 然而，Chrome 119 的最新更新现在支持同站点跨源页面的预渲染，需要通过 HTTP 标头选择加入。
未来的版本可能会将预渲染扩展到跨源页面，并允许在新选项卡中进行预渲染。 推测规则 API 将进行扩展，引入文档规则的分数和语法，并提供更大的灵活性，例如鼠标按下时预渲染链接。
Chrome 中正在进行的实验正在探索其他功能，网站可以参与原始试验来测试并提供有关未来潜在添加功能的反馈。