What Does The Back/Forward Cache Mean For Site Speed?

Loading a new web page takes time, but about 20% of mobile navigations are actually initiated by the browser Back and Forward buttons.

The back/forward cache speeds up these navigation by restoring previously loaded page content.

What is the back/forward cache?

If a page supports the back/forward cache (also called BFCache), the browser saves the full page state in memory when navigating to a new page.

When a user then navigates back to a previous page, the browser restores the full page from a cache instead of reloading it. That way, page content can appear almost instantly.

You can see an example of that in this video.

When is a page served from the back/forward cache?

To benefit from the back/forward cache, a page needs to be eligible for it. Here are some common reasons why a page might not be eligible:

• It uses the unload event (as restoring the page after unload has been handled may break the page)
• It uses the beforeunload event (in Firefox)
• It uses the Cache-Control: no-store header that disables all caches

There are a wide range of reasons why a page might not support the back/forward cache, and you can find the full list here.

How can I check if my site can be served from the back/forward cache?

Chrome DevTools allows you to check whether your page is eligible for the back/forward cache.

1. Right Click on the page and click Inspect to open Chrome DevTools
2. Switch to the Application tab
3. In the Cache section of the sidebar, select Back/forward cache
4. Click Test back/forward cache

DevTools will then show you a status indicating whether your site can use the back/forward cache and, if it’s not eligible, what you could do to support it.

Successfully served from back/forward cache

In this case your page is eligible for the back/forward cache and you don’t need to do anything.

Actionable

This status shows that you should make a change to your website to support the back/forward cache.

Pending Support

Finally, this status shows that your page isn’t currently eligible for the back/forward cache, but Chrome may support it in a future version.

Lighthouse: Page prevented back/forward cache restoration

Lighthouse 10 added a new performance audit that checks whether the page supports the back/forward cache.

You can find it in the Performance section under Diagnostics.

If it passes the message will be "Page didn't prevent back/forward cache restoration".

How to see why a page wasn't restored from the back/forward cache for real users

Chrome reports a notRestoredReasons for back/forward navigations:

performance.getEntriesByType("navigation")[0].notRestoredReasons.reasons

You can also view not restored reasons in DebugBear's real user monitoring feature.

How can you enable or disable Chrome's back/forward cache?

To configure the back/forward cache open chrome://flags/#back-forward-cache in Chrome to toggle the back-forward-cache flag.

How is the back/forward cache different from the HTTP cache?

The browser HTTP cache stores past responses to network requests to avoid having to redownload resources.

The back/forward cache is more comprehensive: the entire page state can be restored.

When only the HTTP cache is used some resources may still have to be redownloaded if they are not eligible for caching. After that the page still needs to run any on-page scripts and render the page contents. With the back/forward cache a lot of this work can be avoided.

What browsers support the back/forward cache?

Chrome, Safari, Firefox, and Edge all support the back/forward cache.

Impact on site speed metrics

If a page is loaded from the cache it can render extremely quickly, which is good for the Core Web Vitals of your website.

For example, here you can see that a page restored from the back/forward cache has a Largest Contentful Paint of just 100 milliseconds.

Compare that to a typical page load without caching, where it takes half a second to load the page.

The back/forward cache can also reduce layout shift. This was noticeable in Google’s Chrome User Experience Report after Chrome enabled the cache.

Monitor and optimize page speed

DebugBear can keep help you track the speed of your website over time. It's built on top of Google's Lighthouse tool but also provides in-depth custom reports.

Continuously monitor Lighthouse scores and get alerted when there's a problem.