如果后退时整个页面都会重新加载,可以检查前进/后退缓存(bfcache)。有效的测试需要具体的导航步骤和已知的初始状态。一次测试成功,并不意味着以后每次返回都能恢复页面。
确定导航步骤
选择一个公开的商品页或文章页,从该页面进入另一页面,再使用浏览器的“后退”按钮返回。记录浏览器、版本及所用页面,并检查返回后的筛选条件、滚动位置和可见内容是否仍然正确。
Milten 的 bfcache 测试有助于检查页面恢复情况。请确认测试结果涵盖哪些导航步骤:手动采用不同的路径,可能会得到不同的结果。
在浏览器中查看结果
Chrome DevTools 的 Application 面板提供了前进/后退缓存测试。它会显示测试结果,以及报告中阻碍页面恢复的原因。解读结果时,请以所测试的浏览器及版本为准。
bfcache 与 HTTP 缓存是不同的机制。bfcache 指南介绍了两者的区别,该指南由 web.dev 提供。仅凭网络请求变快,无法证明页面是从 bfcache 恢复的。
排查报告中的原因
下面是一个不涉及客户数据的说明性示例:诊断工具报告某个引入脚本中的生命周期事件处理程序阻碍了恢复。找到对应脚本,确认处理程序的用途,在非公开测试环境中验证适当的修改,然后按相同的导航步骤重新测试。
不要仅为了通过测试就一概修改缓存响应头。应考虑页面的用途,以及对信息时效性和机密性的要求。bfcache 的使用条件也会因浏览器而异。
检查返回后的页面状态
修改后,不仅要看技术测试结果,还要检查页面内容。如果页面包含价格、购物车或会话信息,请确认这些信息正确。恢复后的页面不应显示可能误导用户的过时信息。
在受众实际使用的浏览器中重复测试,并分别记录成功、失败和未执行的测试。如果返回后的交互响应缓慢,请参阅 INP 指南。
能否保证每次都强制恢复?
是否使用缓存由浏览器决定。测试成功只说明在该次测试中观察到了页面恢复。
是否应该取消所有缓存限制?
应先检查报告中的原因,以及设置该限制的目的。评估修改时,还要考虑保护要求和显示内容的准确性。
测试页面的 bfcache。要检查初次加载,请使用速度测试。
