Skip to main content

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

· 5 min read

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.

Chrome DevTools showing a site that’s eligible for the back/forward cache

Actionable

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

Chrome DevTools showing a site that needs to be changed 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.

Chrome DevTools showing a site that might be eligible for the back/forward cache in a future version of Chrome

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.

Site speed Chrome extension showing a TTFB of 16 milliseconds and an LCP of 100 milliseconds

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

Site speed Chrome extension showing a TTFB of 146 milliseconds and an LCP of 427 milliseconds

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

Core Web Vitals Report by HTTP archive showing ecommerce tools having lower Cumulative Layout Shift after the introduction of the back/forward cache in Chrome

Get a monthly email with web performance articles.