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

Yuriko Hirota
Yuriko Hirota

往返缓存 (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-storeno-cache 之间的主要区别如下。

Cache-control: no-store Cache-control: no-cache
  • 不允许将响应存储在缓存中。
  • 因此,系统会在每次请求时完整提取响应。
  • 应将其用于私密回复。
  • 只要在每次使用前通过服务器重新验证该响应,即可将其存储在缓存中。
  • 这应该是您希望每次都重新验证的公开响应(例如新闻网站的主页面,不过即使这样,非常短的缓存时间也可以提升性能并从主服务器分流工作)。

如果您有兴趣详细了解 Cache-control 选项,此流程图会非常有帮助。

bfcache 的影响(以数据为依据)

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

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

网页即时加载后,导航会感觉更加顺畅

在 Yahoo!JAPAN News 的主要用户体验历程如下所示:

  1. 前往文章列表
  2. 点击一篇文章即可阅读
  3. 返回文章列表
  4. 点击其他文章以供阅读

在 bfcache 之前,当用户阅读完一篇文章(第 2 步)后,就必须等待文章列表页重新加载。对于只想返回文章列表以选择其他文章阅读的用户来说,这可能会造成不便。

向后导航期间的另一个阻碍因素是滚动位置。在实践中,浏览器会在发生向后导航时尝试恢复滚动位置。不过,由于动态添加的广告或其他布局更改,滚动位置通常会被错误地恢复,这可能会导致用户迷失方向,甚至离开页面。当向后导航由 bfcache 提供支持时,这绝不会成为问题:滚动位置会立即正确恢复。

两个幻灯片,显示从文章返回到文章列表页的返回导航。顶部是使用 bfcache 处理进程的影片片段,耗时 0.3 秒;而底部是未使用 bfcache 处理同一进程的影片片段,耗时 3.3 秒。

现在,借助 bfcache,用户体验中的摩擦感已消失,用户可以立即返回文章列表页面,选择另一篇文章阅读,而无需等待文章列表页面加载。

当用户直接从一篇文章浏览到另一篇文章时,也会发生相同的情况:

动画图片:显示启用和不启用 bfcache 时从文章到文章列表页的返回导航流程。借助 bfcache,不仅返回导航速度更快,而且滚动位置也能准确保持。如果没有 bfcache,就无法做出这些保证。

总而言之,为 Yahoo!JAPAN News 包括:

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

总结

简而言之,bfcache 不仅能够让您的网站保持即时,还可以减少整体用户体验中的阻力并提高网站内的互动度。

Chrome 团队会持续关注 bfcache 阻止程序,尤其是本文中列出的两个原因,因为它们是导致不使用 bfcache 的常见原因。将来,这些措施可能无法阻止使用 bfcache,但您无需等到那时。您可以查看 bfcache 阻塞程序并避免这些常见模式(以及其他不太常见的模式),从而受益于 bfcache。