往返快取 (或 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
選項,請參閱這份流程圖。
數字快取對數字的影響
若要評估 bfcache 的影響,Yahoo!JAPAN News 進行了 A/B 版本測試,在為期 2 週後,為一組網頁提供網頁的 bfcache 修正項目,他們挑選了有大量流量的網址路徑,以便測試能帶來有意義的結果。這兩種版本在視覺或功能上沒有其他差異。
以下影片將比較網站與使用 bfcache 和沒有 bfcache。您可以看到啟用 bfcache 的網站在往返瀏覽時載入的速度明顯提升。
最值得期待的是,啟用 bfcache 的該集團網頁瀏覽量和廣告收益大幅提升,尤其是行動裝置使用者。
以下詳細說明 Yahoo!JAPAN News 採用 bfcache A/B 版本測試。(詳情請參閱個案研究文章)。
在網頁間透過往返瀏覽系統立即瀏覽時,使用者在網頁上停留的時間通常較長,因此廣告瀏覽次數會增加,廣告收益也會增加。
bfcache 在網站上提供順暢的使用者體驗
網頁立即載入,瀏覽方式更加流暢。
在 Yahoo!JAPAN News 是最主要的使用者歷程之一:
- 前往文章清單
- 按一下要閱讀的文章
- 返回文章清單
- 按一下其他文章即可閱讀
載入 bfcache 之前,使用者閱讀完文章 (步驟 2) 時,必須等待文章清單網頁重新載入。如果使用者只是想返回文章清單,選擇閱讀另一篇報導,這種作法可能就會造成不便。
返回瀏覽時,另一個阻礙的因素是捲動位置。實際執行時,瀏覽器會在發生反向瀏覽時嘗試還原捲動位置。然而,由於動態新增廣告或其他版面配置變更,捲動位置經常無法正確還原,使用者可能會因此失去航向,甚至離開頁面。如果反向瀏覽是由 bfcache 技術提供,通常不會發生這個問題:捲動位置會立即正確還原。
有了 bfcache,使用者歷程變得更加順暢,使用者現在可以立即返回文章清單頁面,選擇另一篇想閱讀的文章,不必等待文章清單頁面載入完成。
當使用者直接瀏覽另一篇文章後再返回瀏覽,也會發生相同的情況:
簡單來說,針對 Yahoo!JAPAN 新聞包括:
- 提高網頁瀏覽量:使用 bfcache 快取網頁時,使用者較有可能在網站內瀏覽。
- 提高收益:與不使用 bfcache 的實驗組相比,單次工作階段的瀏覽量增加了,廣告曝光次數會提高,導致行動收益增加 9%。
結論
簡單來說,bfcache 不僅能讓網站立即載入,還能減少整體使用者體驗,並提高網站參與度。
Chrome 團隊一直在設法封鎖 bfcache 封鎖程式,尤其是本文中列出的兩個原因,原因是這兩者是使用者未使用 bfcache 的常見原因。未來這些方法或許不會妨礙使用 bfcache,但不需等待。您可以檢查老闆的壞事,避免發生這種情形,並且避免這些常見的模式以及其他罕見的模式,進而受益於 bfcache。