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

Yuriko Hirota

往返快取 (或 bfcache) 是一種瀏覽器最佳化功能，可以實現即時往返瀏覽。可大幅提升使用者的瀏覽體驗，尤其適合需要來回瀏覽多次瀏覽的網站。
bfcache 的 web.dev 文章

Yahoo! JAPAN News 是日本最熱門的新聞平台之一，不但致力於提升 bfcache 命中率，不但改善了使用者體驗，也大幅改善了使用者體驗。具體來說，A/B 版本測試結果顯示，使用 bfcache 的網頁廣告收益提高了 9%。

此個案研究將說明 Yahoo!JAPAN News 移除對 bfcache 的封鎖，以及 Bfcache 如何大幅提升使用者體驗。

移除 bfcache 的封鎖程式

bfcache 自 Chrome 86 版起開始提供，所有新版瀏覽器皆可使用。不過，如要充分發揮 bfcache 的優勢，您必須移除某個網站上的潛在封鎖程式。與 Yahoo!JAPAN 新聞面臨的類型：

使用 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 也計劃在特定情況下使用 no-store 標頭來快取 bfcache 檔案。

CCNS 適用於在任何情況下都一律不得快取的網頁。因此會特別注意，凡是使用 CCNS 的網頁將無法透過任何快取技術 (包括 CDN 邊緣伺服器和本機快取) 受益。

如果你有 CCNS 標題，不妨藉這個機會討論網站適用的Cache-control策略。以下是 no-store 和 no-cache 的主要差異。

`Cache-control: no-store`	`Cache-control: no-cache`
回應無法儲存在快取中。因此，系統在每次要求時都會完整擷取回應。請勿用於提供私人回覆。	回應只要在每次使用前重新驗證伺服器，就可以儲存在快取中。這個回應應為您希望每次重新驗證的公開回應，例如新聞網站的首頁。雖然這樣就算快取時間很短，也能提升效能並減輕主伺服器的工作負擔。

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

數字快取對數字的影響

若要評估 bfcache 的影響，Yahoo!JAPAN News 進行了 A/B 版本測試，在為期 2 週後，為一組網頁提供網頁的 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 在網站上提供順暢的使用者體驗

網頁立即載入，瀏覽方式更加流暢。

在 Yahoo!JAPAN News 是最主要的使用者歷程之一：

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

載入 bfcache 之前，使用者閱讀完文章 (步驟 2) 時，必須等待文章清單網頁重新載入。如果使用者只是想返回文章清單，選擇閱讀另一篇報導，這種作法可能就會造成不便。

返回瀏覽時，另一個阻礙的因素是捲動位置。實際執行時，瀏覽器會在發生反向瀏覽時嘗試還原捲動位置。然而，由於動態新增廣告或其他版面配置變更，捲動位置經常無法正確還原，使用者可能會因此失去航向，甚至離開頁面。如果反向瀏覽是由 bfcache 技術提供，通常不會發生這個問題：捲動位置會立即正確還原。

從文章反向導覽至文章清單頁面的兩邊幻燈片。上半段是使用 bfcache 處理流程的幻燈片，需要 0.3 秒，底層則是不使用 bfcache 處理的流程，因此需要 3.3 秒。

有了 bfcache，使用者歷程變得更加順暢，使用者現在可以立即返回文章清單頁面，選擇另一篇想閱讀的文章，不必等待文章清單頁面載入完成。

當使用者直接瀏覽另一篇文章後再返回瀏覽，也會發生相同的情況：

動畫圖片顯示從文章到文章清單頁面的反向導覽流程，不論是否使用 bfcache。使用 Bfcache 後，向後瀏覽的速度不僅會更快，還能準確維持捲動位置。如果沒有 bfcache，就無法做出這些保證。

簡單來說，針對 Yahoo!JAPAN 新聞包括：

提高網頁瀏覽量：使用 bfcache 快取網頁時，使用者較有可能在網站內瀏覽。
提高收益：與不使用 bfcache 的實驗組相比，單次工作階段的瀏覽量增加了，廣告曝光次數會提高，導致行動收益增加 9%。

結論

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

Chrome 團隊一直在設法封鎖 bfcache 封鎖程式，尤其是本文中列出的兩個原因，原因是這兩者是使用者未使用 bfcache 的常見原因。未來這些方法或許不會妨礙使用 bfcache，但不需等待。您可以檢查老闆的壞事，避免發生這種情形，並且避免這些常見的模式以及其他罕見的模式，進而受益於 bfcache。