往返缓存帮助 Yahoo! JAPAN News 的移动收入提高了 9%

Yuriko Hirota
Yuriko Hirota
X LinkedIn

往返缓存（或 bfcache）是一种浏览器优化，可实现即时后退和前进导航。它可以显著提升用户（尤其是需要频繁来回浏览的网站）的浏览体验。

有关 bfcache 的 web.dev 文章

Yahoo! JAPAN News 是日本最受欢迎的新闻平台之一，该平台齐心协力提高了 bfcache 命中率，并因此在用户体验和业务方面取得了显著改进。具体而言，他们进行的 A/B 测试结果表明，使用 bfcache 的网页的广告收入增加了 9%。

本案例研究将介绍 Yahoo! JAPAN News 移除了 bfcache 的阻塞因素，以及 bfcache 如何大幅提升用户体验。

为 bfcache 消除障碍

bfcache 自 Chrome 86 起便已推出，并且还适用于所有新式浏览器。不过，要充分利用 bfcache，需要移除网站上潜在的阻碍因素。Yahoo! 日本新闻面临的挑战：

  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 的情况下，网站在后退或前进导航期间的加载速度明显更快。

真正令人期待的是，启用 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! JAPAN News 包含以下内容：

  • 网页浏览量增加：当网页通过 bfcache 进行缓存时，用户更倾向于在网站内浏览。
  • 收入增加：由于每个会话的网页浏览量增加，广告展示次数也随之增加，与没有 bfcache 的测试组相比，移动设备上的收入增加了 9%。

立即实现 bfcache

简而言之，bfcache 不仅能让您的网站实现即时加载，还能减少整体用户体验中的摩擦，并提高网站内的互动度。

Chrome 团队会不断关注 bfcache 阻止因素，尤其是列出的原因，因为这些都是导致不使用 bfcache 的常见原因。未来，这些可能不会阻止使用 bfcache，但无需等到那时。 您可以立即查看 bfcache 阻止因素，避免这些常见（以及其他不太常见）的模式，从而受益于 bfcache。