往返快取如何協助 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 事件非常不可靠。此外，Permissions-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 的群組的網頁瀏覽次數和廣告收益大幅增加，尤其是在行動裝置上。

以下是 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!「日本新聞」包括：

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

結論

簡而言之，bfcache 不僅可讓網站即時載入，還能減少整體使用者體驗的摩擦，並提高網站的參與度。

Chrome 團隊會持續檢查 bfcache 封鎖程式，尤其是本文列出的兩個原因，因為這兩個原因是未使用 bfcache 的常見原因。日後這些做法可能無法防止使用 bfcache，但您不必等到那時。您可以查看 bfcache 阻斷項目，並避免這些常見和較不常見的模式，以便充分運用 bfcache。