Back/Forward Cache (bfcache)

Back

What is Back/Forward Cache?

The Back/Forward Cache (bfcache) is a browser optimization that stores a complete snapshot of a page in memory when the user navigates away. When the user presses the Back or Forward button, the page is instantly restored from cache instead of being reloaded.

Live Demo: Page State Persistence

This counter and timer demonstrate bfcache. Navigate away and come back — if bfcache works, the counter value and timer will be preserved!

Counter: 0

Time on page: 0 seconds

Page loaded normally (not from bfcache)

Try it!

  1. Click "Increment Counter" a few times
  2. Click the link below to navigate away
  3. Press the browser's Back button
  4. Check: Is the counter value preserved? Is the timer still running?
Navigate away to example.com

Event Log

🔧 DevTools: How to Inspect bfcache

  1. Open DevTools (F12)
  2. Go to Application panel
  3. In the sidebar, find Background services → Back/forward cache
  4. Click "Test back/forward cache" button
  5. DevTools will navigate away and back, then report if bfcache was used
  6. If bfcache was blocked, DevTools shows the exact reasons why

📝 Practice Exercise

  1. Open the Application panel and find "Back/forward cache"
  2. Click "Test back/forward cache" — does this page pass?
  3. Now open the incompatible page and test it — what reasons are listed?
  4. Compare the two results to understand what blocks bfcache