往返快取有助於 Yahoo! JAPAN News 行動收益增加 9%

Yuriko Hirota
Yuriko Hirota
X

往返快取 (或稱 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 面臨的問題包括：

  1. 使用 unload 處理常式。
  2. 在 Cache-control 標頭上使用 no-store 指示詞。

如要檢查網站上的主要阻斷因素，請依序前往「Chrome 開發人員工具」 >「應用程式」 >「前進/後退快取」。或者，您也可以使用 notRestoredReasons API，根據實際使用情況，取得更全面的廣告阻擋程式資訊。

以下是 Yahoo!JAPAN News 移除了阻擋工具：

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

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

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

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

透過 A/B 測試來展示成效

為評估 bfcache 的影響，Yahoo!JAPAN News 進行了為期兩週的 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 讓網頁之間的返回/前進導覽動作變得即時，使用者通常會停留在網頁上更久，進而增加廣告瀏覽量，提高廣告收益。

順暢的使用者體驗

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

在 Yahoo!JAPAN News 的主要使用者歷程之一是閱讀多篇文章：

  1. 前往文章清單。
  2. 按一下要閱讀的文章。
  3. 完成後，請返回文章清單。
  4. 點選其他文章閱讀。

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

在向後導覽時，另一個造成阻礙的因素是捲動位置。實際上，瀏覽器會在向後導覽時嘗試還原捲動位置。不過，由於動態新增的廣告或其他版面配置變更，捲動位置可能會錯誤還原。這會讓使用者感到困惑，甚至放棄該網頁。

當向後導覽功能由 bfcache 提供時，這個問題就會解決：捲動位置會立即正確還原。

兩個倒轉導覽的膠卷。頂端是使用 bfcache 處理的膠卷，耗時 0.3 秒；底端是未使用 bfcache 處理的相同程序，耗時 3.3 秒。

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

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

動畫圖片：顯示從文章返回文章清單頁面的後退導覽流程，有/無 bfcache。
使用 bfcache 後，往回瀏覽的速度會加快，而且捲動位置會準確保留。如未使用 bfcache，則無法保證這些改善效果。

簡而言之，bfcache 可為 Yahoo!「日本新聞」包括：

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

立即導入 bfcache

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

Chrome 團隊會持續檢查 bfcache 封鎖程式，特別是列出的理由，因為這些是未使用 bfcache 的常見原因。日後這些做法可能無法防止使用 bfcache，但您不必等到那時。您現在可以查看自己的 bfcache 封鎖項目，並避免這些常見 (和其他較不常見) 的模式，以便充分運用 bfcache。