What Is the Back/Forward Cache?

One of the fastest page loads is a page load that does not really happen.

Browsers have a feature called the back/forward cache, usually shortened to bfcache.

When it works, the browser can keep a page in memory after you leave it. If you press Back, the page can be restored almost instantly instead of being downloaded and built again.

Google has a useful overview in its bfcache guide.

Normal navigation

Imagine this:

Page A
↓
Page B
↓
Back to Page A

Without bfcache, returning to Page A may involve:

request HTML
↓
load CSS
↓
load images
↓
run JavaScript
↓
restore page

With bfcache, the browser may keep the whole page state ready.

Then:

Back
↓
restore Page A

That can be extremely fast.

It keeps more than HTML

The back/forward cache is not the same as the normal HTTP cache.

The browser can preserve page state such as:

That is why returning can feel instant.

Why this matters

People use Back and Forward all the time.

Think about:

If the previous page comes back immediately at the same scroll position, the whole site feels better.

You normally do not enable it

bfcache is a browser feature.

There is no special HTML tag to turn it on.

The goal is mostly to avoid doing things that stop the browser from using it.

The pageshow event

A page restored from bfcache does not behave exactly like a new page load.

You can check:

window.addEventListener("pageshow", event => {
  if (event.persisted) {
    console.log("Restored from bfcache");
  }
});

This can be useful if the page needs to refresh some data after the user returns.

pagehide

There is also:

window.addEventListener("pagehide", () => {
  // Page is being hidden
});

Modern page lifecycle events are usually a better choice than relying on old unload behaviour.

Avoid unnecessary unload

If your site uses:

window.addEventListener("unload", () => {
  ...
});

ask whether it is really needed.

Old unload patterns can get in the way of modern browser lifecycle behaviour.

Static sites benefit too

bfcache is not only for complex apps.

A simple blog can benefit a lot.

Blog list
↓
Article
↓
Back

If the list page comes back instantly at the same scroll position, browsing feels smooth even though the site itself has almost no JavaScript.

HTTP cache vs bfcache

HTTP cache stores resources such as:

style.css
logo.svg
photo.webp

bfcache can preserve the whole page state.

So even if all your files are already cached, bfcache can still make Back navigation faster because the browser does not need to rebuild the page.

Dynamic data can still work

If a page shows data that may change while the user is away:

window.addEventListener("pageshow", event => {
  if (event.persisted) {
    refreshImportantData();
  }
});

That gives you the fast restore while still updating what actually needs updating.

How to test it

A simple manual test:

  1. Open a page.
  2. Scroll down.
  3. Open another page.
  4. Press Back.
  5. See whether the page appears immediately at the same position.

Chrome DevTools also has tools for checking bfcache eligibility.

Performance is not only first load

A lot of performance work focuses on:

First visit

But real users move around a site.

Their experience also includes:

Back
Forward
Return to list
Open next item

bfcache helps those normal paths.

Let the browser help

The web platform already has performance features that do not require adding more code.

bfcache is a good example.

You usually do not need to build it.

You just need to avoid getting in its way.

For content sites, shops, galleries, and many other websites, that can make normal browsing feel much faster with almost no extra work.