往返快取如何協助 Yahoo!JAPAN News 在行動裝置上將收益提高 9%

Yuriko Hirota

往返快取 (或 bfcache) 是一種瀏覽器最佳化功能，可以即時往返瀏覽。大幅提升使用者的瀏覽體驗，尤其是在網站需要頻繁前後瀏覽的情況下。
web.dev 上的 bfcache 相關文章

Yahoo! JAPAN News 是日本最受歡迎的新聞平台之一，他們全力改善 bfcache 命中率，並因此大幅改善使用者體驗和業務成效。具體來說，該公司的 A/B 版本測試結果顯示，使用 bfcache 的網頁廣告收益提高了 9%。

本個案研究將說明 Yahoo!JAPAN News 移除了 bfcache 的封鎖項目，以及 bfcache 如何大幅改善使用者體驗。

移除 bfcache 的攔截器

自 Chrome 86 起，bfcache 就已推出，並且也適用於所有新式瀏覽器。不過，如要充分運用 bfcache 的優勢，您需要移除單一網站上的潛在攔截器。以下是 Yahoo!JAPAN News：

使用 unload 處理常式
在 Cache-control 標頭上使用 no-store 指令

如要查看網站的主要阻擋項目，請依序前往「Chrome 開發人員工具」>「應用程式」>「前進/後退快取」(詳情)，或使用 notRestoredReasons API，根據實際使用情況取得更完整的阻擋項目檢視畫面。

以下是 Yahoo!JAPAN News 已移除阻擋程式：

卸載處理常式：請使用 pagehide 事件，而非 unload 事件，因為 unload 事件非常不可靠。此外，permission-policy: unload 已在 Chrome 115 中推出，讓網站可可靠地移除特定來源的 unload 處理常式。Chrome 也預計逐步淘汰 unload 處理常式。
Cache-control: no-store (簡稱 CCNS)：將 Cache-control 標頭從 no-store 變更為 no-cache，即可啟用 bfcache。Chrome 也預計開始在特定情況下為 bfcache 快取，即使有 no-store 標頭也一樣。

CCNS 適用於無論在任何情況下都不應快取的網頁。不過，含有 CCNS 的網頁將無法使用任何快取技術，包括 CDN 邊緣伺服器和本機快取。

如果您有 CCNS 標頭，這正是討論網站適合的 Cache-control 策略的好時機。以下是 no-store 和 no-cache 的主要差異。

`Cache-control: no-store`	`Cache-control: no-cache`
回應不得儲存在快取中。因此，系統會針對每個要求完整擷取回應。應用於私人回覆。	只要在每次使用之前透過伺服器重新驗證回應，就可以將回應儲存在快取中。這些應為您每次都想重新驗證的公開回應 (例如新聞網站的首頁，不過即使如此，快取時間極短也能改善效能，並分擔主要伺服器的工作)。

如要進一步瞭解 Cache-control 選項，請參考這張流程圖。

bfcache 對效能影響的數值

為評估 bfcache 的影響，Yahoo!JAPAN News 進行了 2 週的 A/B 版本測試，針對一個群組為一個版本提供 bfcache 修正，另一個版本的網頁版本無法經由 bfcache 快取。他們選擇流量充裕的網址路徑，以便測試能取得有意義的結果。這兩個版本之間沒有其他視覺或功能上的差異。

以下影片是比較網站與 bfcache 以及不使用 bfcache 的情形。如您所見，啟用 bfcache 的網站在往返瀏覽期間的載入速度明顯更快。

值得注意的是，啟用 bfcache 的群組的網頁瀏覽次數和廣告收益大幅增加，尤其是在行動裝置上。

以下是 Yahoo! 觀察到的影響詳情：JAPAN News 的 bfcache A/B 版本測試。(詳情請參閱個案研究文章)。

指標	升幅百分比 (行動裝置)	升幅百分比 (電腦版)
bfcache 命中率	+54.03 分 (0.04% → 54.07%)	+47.28 個百分點 (0.02% → 47.30%)
網頁瀏覽	+2.26%	+0.65%
廣告收益	+9.0%	+0.6%

當網頁間的往返瀏覽透過 bfCache 載入時，使用者通常會停留在較久的時間，進而增加廣告瀏覽次數，進而提升廣告收益。

bfcache 可提升網站上流暢的使用者體驗

網頁即時載入後，瀏覽體驗會更流暢。

在 Yahoo!JAPAN News 的主要使用者歷程如下：

前往文章清單
按一下要閱讀的文章
返回文章清單
按一下其他文章即可閱讀

在導入 bfcache 之前，使用者閱讀完文章 (步驟 2) 後，必須等待文章清單頁面重新載入。對於只想返回文章清單選擇其他文章的使用者來說，這可能會造成阻礙。

在向後導覽時，另一個造成阻礙的因素是捲動位置。實際上，瀏覽器會在使用者返回瀏覽時嘗試還原捲動位置。不過，由於動態新增的廣告或其他版面配置變更，捲動位置經常會錯誤還原，導致使用者找不到方向，甚至離開網頁。如果使用 bfcache 的反向導覽功能，則不會發生這個問題，因為捲動位置會立即且正確地還原。

兩個短片，分別顯示從文章返回文章清單頁面的後退導覽。頂端是使用 bfcache 處理的程序的膠卷，耗時 0.3 秒；底端則是未使用 bfcache 處理的相同程序，耗時 3.3 秒。

有了 bfcache，使用者歷程的摩擦力就會消失，使用者可以立即返回文章清單頁面，選擇要閱讀的其他文章，不必等待文章清單頁面載入。

使用者直接瀏覽一篇文章，然後返回上一篇文章時，也會發生同樣的情況：

動畫圖片：顯示從文章返回文章清單頁面的導覽流程，有/無 bfcache。有了 bfcache，不僅往回瀏覽的速度更快，捲動位置也能準確保留。沒有 bfcache 就無法保證這些內容。

簡單來說，在 Yahoo!JAPAN News 包括：

瀏覽量增加：使用者在網頁使用 bfcache 快取後，更有可能在網站內瀏覽。
收益增加：由於每個工作階段的網頁瀏覽次數增加，廣告曝光次數也隨之增加，因此行動裝置的收益比未使用 bfcache 的測試群組高出 9%。

結論

簡單來說， bfcache 不僅能讓網站立即上線，還能減少整體使用者體驗的阻礙，並提高網站參與度。

Chrome 團隊會持續檢查 bfcache 封鎖程式，尤其是本文列出的兩個原因，因為這兩個原因是未使用 bfcache 的常見原因。日後這些做法可能無法防止使用 bfcache，但您不必等到那時。您可以檢查 bfcache 攔截器，並避免這些常見和其他較不常見的模式，讓您受益於 bfcache。