How to Get Back/Forward Cache Right
A browser feature that keeps a complete snapshot of a page in memory when the visitor navigates away, so pressing Back or Forward restores it instantly instead of loading it again.
Marcus Adeyemi
At a glance
- Share of navigations that are back or forward, Chrome data about 1 in 10 on desktop and 1 in 5 on mobile
- Most common blocker unload event listeners
- Cache-Control: no-store has historically kept pages out of the cache
- Testing Chrome DevTools includes a back/forward cache test in the Application panel
- Detecting a restore the pageshow event with persisted set to true
Why it matters
Why it matters: Back and forward navigations are a large share of page views, and a page that cannot use the cache reloads from scratch every time, a delay visitors feel and field data records.
Best practice
- Replace unload handlers with pagehide
- Test key templates with the DevTools back/forward cache panel
- Refresh time-sensitive data when a page is restored from the cache
- Close open connections such as WebSockets when the page is hidden
- Check third-party scripts for unload handlers they add
Common pitfalls
Watch out for:
- Adding unload listeners to send analytics beacons
- Setting no-store on pages that hold nothing sensitive
- Assuming a restored page shows current prices or stock
- Ignoring the not-restored reasons DevTools reports
When to call in a specialist
Bottom line Bring in help when DevTools reports pages are never restored from the cache, or when third-party scripts you cannot edit are blocking it.
Where this comes from
- web.dev — Back/forward cache
- Chrome for Developers — Test back/forward cache
- MDN Web Docs — Window: pageshow event
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
