Optimize pages for back/forward cache

Back/forward cache turns many browser back and forward navigations into near-instant restores because the entire page is resumed from memory instead of being rebuilt from the network. Losing bfcache eligibility makes common navigations feel far slower than they need to.

Quick Reference

• Never add an unload listener - it is the most common bfcache blocker
• Use pagehide and pageshow instead of assuming every navigation reloads
• Refresh time-sensitive state when pageshow.persisted is true
• Keep beforeunload conditional and remove it when there are no unsaved changes
• Verify eligibility in DevTools instead of assuming a page is cacheable

Check

Review this route for back/forward cache blockers. Search for unload or unconditional beforeunload listeners, state that assumes every navigation is a full reload, and resource lifecycles that break when the page is resumed from memory.

Fix

Replace unload logic with pagehide and pageshow handlers, remove unnecessary blockers, and refresh only the time-sensitive state that must change after a bfcache restore.

Explain

Explain how the back/forward cache differs from HTTP caching, why unload blocks it, and how pageshow/pagehide should be used instead.

Code Review

Review route code, global listeners, analytics hooks, and data-refresh logic related to Optimize pages for back/forward cache. Flag exact listeners, APIs, or lifecycle assumptions that prevent a restore or leave stale state after a restore.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/back-forward-cache