发布时间：2025 年 1 月 28 日
本案例研究介绍了 Ray-Ban 如何使用 Speculation Rules API 通过预渲染加快用户日后的导航速度，进而提升了 Ray-Ban 电子商务平台的业务表现。取得这一成效后，Ray Ban 又开始考虑其他可同样提升性能的方案，例如让网页符合 bfcache 的使用条件。
Ray-Ban 是一家标志性的眼镜品牌，以 Aviator 和 Wayfarer 等经典款式而闻名，将经典设计与现代潮流相融合。作为眼镜行业的知名领导者之一，Ray-Ban 的电子商务渠道在确保公司竞争力方面发挥着关键作用，每年吸引超过 8,000 万唯一身份观看者。
作为其关键业务渠道，Ray-Ban 不断改进其电子商务平台的用户体验，并认识到核心网页指标的重要性及其对平台用户体验的直接影响。
Ray-Ban 持续改进关键用户历程的方法
由于 Ray-Ban 的电子商务平台使用的 MPA（多页面应用）架构的特性，每当用户与需要新页面的链接或按钮互动时，浏览器都会向服务器发送导航请求，服务器会响应一个新的 HTML 页面。这对 Ray-Ban 来说是一个挑战，因为他们需要为用户提供顺畅的浏览体验，尤其是在产品详情页面 (PDP) 上。PDP 被认为是最常用的入口点之一，也是转化漏斗中的重要组成部分。
得益于最近完成的重新设计，Ray-Ban 的核心网页指标有所提升。不过，仍有改进空间，尤其是在需要大量使用外部库来提供互动式用户体验的情况下，这会导致与其他网页相比，“含有最多内容的网页”(LCP) 指标增加。
因此，Ray-Ban 选择实现预测性加载，以改善其网站上的重要用户体验历程。使用推测规则可能是减少未来导航的网页加载速度感知时间的最有效解决方案之一，因为它会预加载并预渲染用户接下来要访问的网页的内容。
Ray-Ban 针对不同设备的预渲染策略
Ray-Ban 采用了两种不同的预渲染策略，以应对桌面设备和移动设备之间的行为和资源差异。这些策略旨在在不影响网站的现有功能或用户体验的情况下，最大限度提升性能。
在桌面设备上，执行预渲染的方法是：使用 "moderate" 提前性设置，将鼠标悬停在商品详情页面 (PLP) 中的商品图块上，然后将同一图块的标识类作为选择器传递。
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container"
}
]
},
"eagerness": "moderate"
}
]
}`;
document.head.appendChild(scriptPrerender);
由于 hover 事件在移动设备上实际上不可用，因此系统会针对前四个功能块（被发现点击次数最多）使用 immediate 急切设置来执行预渲染。
let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');
scriptPrerender.innerHTML = `{
"prerender": [
{
"source": "document",
"where": {
"and": [
{
"selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
}
]
},
"eagerness": "immediate"
}
]
}`;
document.head.appendChild(scriptPrerender);
预渲染结果
这两种预渲染策略对 Ray-Ban 的 PDP 页面的 Core Web Vitals 指标和业务 KPI 趋势产生了显著影响。
| 设备 | LCP | 转化率变化 | 流失率变化 | 预渲染速率 | ||
|---|---|---|---|---|---|---|
| 之前 | 之后 | 更改 | ||||
| 移动设备 | 4.69 秒 | 2.66 秒 | 43.28% | +101.47% | -13.25% | 29% |
| 桌面设备 | 3.03 秒 | 1.74 秒 | 42.57% | +156.16% | -13.18% | 50% |
我们比较了浏览从服务器提供的 PDP 的用户的业务指标与浏览预渲染 PDP 的用户的业务指标。在从 Adobe 跟踪工作区收集支持该 API 的浏览器（例如 Chrome）用户的数据后，Ray-Ban 发现效果显著提升，这表明用户可以更顺畅地浏览网站。对于不支持预渲染的其他浏览器，Ray-Ban 决定在桌面设备上在 hover 事件发生时预加载资源，并在移动设备上预加载 PLP 的前四个功能块。
实现用于预渲染的 Speculation Rules API 对 Ray-Ban 的电子商务平台来说具有革命性意义。通过这些创新策略，Ray-Ban 在桌面设备和移动设备上的 LCP 缩短了 43%，显著提升了用户体验。
此优化不仅实现了几乎即时的页面加载，还在保留当前 MPA 架构的同时，实现了 SPA 式架构的许多优势，尤其是在 PDP 等关键页面上。
从业务角度来看，这些改进具有革命性意义，A/B 测试也证实了这一点：
- 提高转化率：
- PDP 的移动转化率大幅提升了 101.47%。
- 桌面设备转化率的提升幅度更为惊人，达到了 156.16%。
- 提升用户互动度：
- 移动设备上的每次会话平均浏览网页数增加了 51.95%，桌面设备上的每次会话平均浏览网页数增加了 65.30%，这表明导航更顺畅，用户兴趣更持久。注意：我们未将未激活的预渲染网页视为“已查看”。
- 降低了退出率：
- 在移动设备上，跳出率（从某个网页退出的用户数占该网页浏览次数的百分比）下降了 13.25%，在桌面设备上下降了 13.18%，这表明在关键购物时刻，留存率有所提高。
扩展范围，提供更多即时用户导航
鉴于预渲染 PDP 取得的出色成效，Ray-Ban 决定通过预渲染菜单中的 PLP 链接，进一步充分发挥 Speculation Rules API 的潜力。这种方法可以显著提高目录和商品页面类型的加载速度，从而提高 LCP。
虽然预渲染有助于未来的导航，但 Ray-Ban 还发现，在 PLP 和 PDP 之间来回导航的比例相当高。由于预渲染实验结果表明，优化的用户导航与良好的业务指标之间存在直接关联，因此 Ray-Ban 还研究了往返缓存 (bfcache)。
bfcache 是一种浏览器优化功能，可通过在内存中保留浏览器历史记录中符合条件的网页的快照，并在不通过网络的情况下恢复这些网页，从而实现即时前后导航。为确保 Ray-Ban 的 PDP 和 PLP 符合 bfcache 的条件，我们进行了一些快速更新：
- 使用
unload=(), bluetooth=(), andaccelerometer=()的Permissions-Policy标头值停用unload事件，并限制对设备的 Bluetooth 和 accelerometer API 的访问权限。 - 在
pagehide事件中关闭 RTC 和 IndexedDB 连接。 - 避免不必要地使用
Cache-Control: no-store响应标头。
在 PLP 上启用 bfcache 支持后，往返导航占到流量的 40% 时，bfcache 命中率为 0，LCP 和 CLS 分别提高了近 30% 和 83%。
| 指标 | 2024 年 10 月 13 日 > 2024 年 11 月 9 日 | 2024-11-24 > 2024-12-21 | 增量 |
|---|---|---|---|
| LCP | 3725 毫秒 | 2674 毫秒 | -28.21% |
| INP | 521 毫秒 | 395 毫秒 | -24.18% |
| CLS | 0.46 | 0.08 | -82.61% |
| 往返缓存命中率 | 0.02% | 72.90% | +72.87pp |
总结
这些结果表明，预渲染有潜力显著提升电子商务网站的性能。通过根据用户行为预渲染未来导航的网页，Ray-Ban 不仅改善了核心网页指标，还提升了用户互动度并提高了销售额。这一优势增强了 Ray-Ban 的决心，不仅要为未来的导航提供流畅的导航体验，还要为 bfcache 提供的返回/前进导航提供流畅的导航体验。
此案例研究重点介绍了如何利用现代 Web 性能技术弥合技术指标和业务 KPI 之间的差距，为用户体验和电子商务成效树立新的基准。
特别感谢 Lorenzo Bartomioli、Gilberto Cocchi、Alejandro Baeza Redondo、Barry Pollard 和 Jeremy Wagner 对本工作的贡献。