往返缓存帮助 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 移除障碍

bfcache 自 Chrome 86 起就已推出，并且所有新型浏览器也都支持它。不过，要充分利用 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! 带来的好处包括：JAPAN News 包括：

  • 网页浏览量增加：使用 bfcache 缓存网页后，用户更有可能在网站中浏览。
  • 收入增加：与未使用 bfcache 的测试组相比，由于每次会话的网页浏览量增加，广告展示次数也增加了，这使得移动设备上的收入增加了 9%。

立即实现 bfcache

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

Chrome 团队会持续关注 bfcache 阻止程序，尤其是列出的原因，因为这些是导致不使用 bfcache 的常见原因。将来，这些措施可能无法阻止使用 bfcache，但您无需等到那时。现在，您可以查看 bfcache 阻止程序并避免这些常见（以及其他不太常见）模式，从而受益于 bfcache。