往返缓存如何帮助 Yahoo!JAPAN News 将移动广告收入提高 9%

Yuriko Hirota

往返缓存（即 bfcache）是一种浏览器优化方法，可实现即时的往返导航。它可以显著改善用户的浏览体验，尤其是对于涉及大量来回导航的网站。

关于 bfcache 的 web.dev 文章

Yahoo! JAPAN News 是日本最受欢迎的新闻平台之一，该平台共同努力提高了 bfcache 的命中率，因此用户体验和业务成效得到了显著提升。具体而言，他们执行的 A/B 测试的结果表明，使用 bfcache 的网页的广告收入增加了 9%。

本案例研究将介绍 Yahoo!JAPAN News 消除了 bfcache 带来的阻碍，并了解 bfcache 如何显著改善用户体验。

为 bfcache 移除障碍

从 Chrome 86 开始，bfcache 就已推出，并且也适用于所有新型浏览器。不过，要充分利用 bfcache，需要清除网站上的潜在阻碍。Yahoo!日本新闻所面对的是：

1. 使用 unload 处理程序
2. 在 Cache-control 标头上使用 no-store 指令

您可以前往 Chrome 开发者工具 > 应用 > 往返缓存（更多详情），或者通过使用 notRestoredReasons API，根据现场的实际使用情况更全面地了解阻碍因素，从而查看您的网站有哪些主要阻碍。

这里介绍了 Yahoo!JAPAN News 已移除拦截器：

• 卸载处理程序：使用 pagehide 事件而非 unload 事件，因为 unload 事件非常不可靠。此外，Chrome 115 中推出了 permission-policy: unload，以便网站能够可靠地移除特定源的 unload 处理程序。Chrome 还计划逐步弃用 unload 处理程序。
• Cache-control: no-store（简称 CCNS）：将 Cache-control 标头从 no-store 更改为 no-cache 可以启用 bfcache。此外，Chrome 还计划在某些情况下开始缓存 bfcache，即使具有 no-store 标头也是如此。

CCNS 适用于在任何情况下都不应缓存的网页。但需要注意的是，任何使用 CCNS 的网页都无法受益于任何缓存技术，包括 CDN 边缘服务器和本地缓存。

如果您有 CCNS 标头，这是讨论适合您网站的正确Cache-control策略的绝佳机会。no-store 和 no-cache 之间的主要区别如下。

Cache-control: no-store	Cache-control: no-cache
不允许将响应存储在缓存中。 因此，每个请求都会完整提取响应。 此字段适用于不公开响应。	允许将响应存储在缓存中，前提是每次使用前通过服务器重新验证响应。 这应该是您希望每次都重新验证的公开响应（例如，新闻网站的首页，但即使缓存非常短的时间也可以提高性能并将工作量从主服务器分流）。

如果您想详细了解 Cache-control 选项，此流程图会很有帮助。

bfcache 在数字方面的影响

为了衡量 bfcache 的影响，Yahoo!JAPAN News 进行了为期 2 周的 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 在网页之间能够瞬时进行往返导航，用户往往会在网页上停留更长时间，从而增加广告浏览量，从而提高广告收入。

bfcache 可提升网站上的顺畅用户体验

当网页加载速度较快时，导航会更加顺畅。

在 Yahoo!Japan News，则是用户的主要历程之一，具体如下：

1. 前往文章列表
2. 点击某篇文章即可阅读
3. 返回到文章列表
4. 点击另一篇报道可阅读

在 bfcache 之前，用户在读完一篇文章（第 2 步）后，必须等待文章列表页面再次加载。如果用户只想返回文章列表来选择其他文章进行阅读，这可能会造成阻碍。

向后导航期间阻碍因素的另一个因素是滚动位置。实际上，浏览器会在向后导航发生时尝试恢复滚动位置。然而，由于动态添加的广告或其他布局变化，滚动位置经常会得到错误恢复，导致用户失去方向，甚至离开页面。如果向后导航由 bfcache 提供支持，这从来不会出现问题：滚动位置会立即且正确恢复。

现在，有了 bfcache，用户体验历程中的障碍就消失了 - 用户可立即返回到文章列表页面，并选择其他文章来阅读，而无需等待文章列表页面加载。

如果用户直接从某篇文章浏览另一篇文章，然后再返回，也会发生相同的情况：

简而言之，为 Yahoo!JAPAN News 包括：

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

总结

简而言之，bfcache 不仅可以让您的网站变得即时，还可以减少整体用户体验中的障碍，提高网站内的互动度。

Chrome 团队一直在关注 bfcache 阻碍因素，尤其是本文中列出的两个原因，因为它们是未使用 bfcache 的常见原因。将来，这些更新可能不会阻止 bfcache 使用，但无需等待。您可以通过 bfcache 从 bfcache 中获益，方法是观察 bfcache 阻碍因素，并避开这些常见和其他不太常见的模式。