發布日期：2025 年 1 月 28 日
本案例研究說明 Ray-Ban 如何使用 Speculation Rules API 加快使用者日後的導覽速度，進而改善 LCP 指標，並提升 Ray-Ban 電子商務平台的業務成效。這項做法成效斐然，因此 Ray-Ban 開始尋找其他可用來提升成效的做法，例如讓網頁符合 bfcache 的使用資格。
Ray-Ban 是知名眼鏡品牌，以經典款式 (例如 Aviator 和 Wayfarer) 聞名，融合經典設計與現代潮流。作為眼鏡領域的知名領導品牌，Ray-Ban 的電子商務管道在確保公司競爭力方面扮演著重要角色，每年吸引超過 8,000 萬名不重複訪客。
作為主要的業務管道，Ray-Ban 持續改善電子商務平台的使用者體驗，並瞭解網站使用體驗核心指標的重要性，以及這些指標對平台使用者體驗的直接影響。
Ray-Ban 持續改善關鍵使用者歷程
由於 Ray-Ban 電子商務平台採用的 MPA (多頁面應用程式) 架構特性，每次使用者與需要新頁面的連結或按鈕互動時，瀏覽器都會向伺服器傳送導覽要求，而伺服器會回應新的 HTML 網頁。這對 Ray-Ban 來說是一大挑戰，因為他們必須為使用者提供順暢的瀏覽體驗，尤其是在產品詳細資料頁面 (PDP) 上，因為這項服務已被認定為最常用的進入點，也是轉換漏斗中的重要環節。
在最近完成的重新設計後，Ray-Ban 的Core Web Vitals 指標有所改善。不過，仍有改善空間，尤其是在需要大量使用外部程式庫才能提供互動式使用者體驗的情況下，因為這會導致 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 產品資訊頁面的 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 的使用者，兩者之間的業務指標。在針對使用支援 API 的瀏覽器 (例如 Chrome) 的使用者，從 Adobe 追蹤工作區收集資料後，Ray-Ban 發現大幅改善，證明使用者可更順暢地瀏覽網站。對於不支援預先算繪的其他瀏覽器，Ray-Ban 決定在桌上型電腦上執行 hover 事件時，以及在行動裝置上執行 PLP 的前四個圖塊時，預先擷取資源。
實作 Speculation Rules API 以便預先算繪，是 Ray-Ban 電子商務平台的一大轉捩點。透過這些創新策略，Ray-Ban 在電腦和行動裝置上的 LCP 改善幅度達到 43%，大幅提升使用者體驗。
這項最佳化功能不僅可提供幾乎即時的網頁載入速度，還能保留 SPA 架構的許多優點，同時維持現有的 MPA 架構，尤其是在 PDP 等重要網頁上。
從商業角度來看，這些改善措施帶來了重大轉變，A/B 測試也證實了這一點：
- 提高轉換率：
- PDP 的行動裝置轉換率大幅提升 101.47%。
- 電腦轉換率更大幅提升 156.16%。
- 提升使用者參與度：
- 行動版每個工作階段的平均網頁瀏覽次數增加了 51.95%，電腦版則增加了 65.30%，顯示使用者瀏覽網頁的流暢度提升，且持續感興趣。注意：我們並未將未啟用的預先算繪網頁視為「已查看」網頁。
- 降低離開率：
- 行動版的離開率 (從某個網頁離開的使用者人數除以該網頁的瀏覽次數) 下降了 13.25%，電腦版則下降了 13.18%，顯示在關鍵購物時刻，留存率有所提升。
擴大範圍，提供更多即時使用者導覽功能
考量到透過預先算繪 PDP 獲得的優異成效，Ray-Ban 決定進一步發揮 Speculation Rules API 的潛力，在選單中預先算繪 PLP 連結。這種做法可大幅改善目錄和產品頁面類型的載入速度，進而提升 LCP。
雖然預先算繪可協助未來導覽，但 Ray-Ban 也發現，使用者在 PLP 和 PDP 之間來回導覽的比例相當高。由於預先顯示實驗結果顯示，經過最佳化的使用者導覽功能與良好的業務指標有直接關聯，Ray-Ban 也研究了往返快取 (bfcache)。
Bfcache 是一種瀏覽器最佳化功能，可在瀏覽器記錄中保留符合條件的網頁快照，並在不經過網路的情況下還原這些快照，讓使用者能迅速往返網頁。為確保 Ray-Ban 的 PDP 和 PLP 符合 bfcache 使用資格，我們快速進行了幾項更新：
- 停用
unload事件，並使用Permissions-Policy標頭值unload=(), bluetooth=(), andaccelerometer=()限制存取裝置的 Bluetooth 和 加速計 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 提供的往返導覽功能。
本案例研究說明如何運用新式網頁效能技術，彌補技術指標和業務 KPI 之間的差距，為使用者體驗和電子商務成效設定新的基準。
特別感謝 Lorenzo Bartomioli、Gilberto Cocchi、Alejandro Baeza Redondo、Barry Pollard 和 Jeremy Wagner 對這項工作的貢獻。