Agent Wranglers

Performance Recommended

Keep the back button instant

Keep every page able to use the back/forward cache, which shows a page instantly on Back. Use no unload handlers and no Cache-Control: no-store on pages.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Use pagehide instead of unload. Don't send Cache-Control: no-store on pages. Close open connections on pagehide.

Example

let socket;
const connect = () => { socket = new WebSocket("wss://example.com/live"); };
connect();
addEventListener("pagehide", () => socket.close());
addEventListener("pageshow", (e) => {
  if (e.persisted) connect(); // restored from the back/forward cache
});

How to check

DevTools › Application › Back/forward cache reports the page as eligible.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/bfcache.