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
unloadevent (as restoring the page after
unloadhas been handled may break the page)
- It uses the
beforeunloadevent (in Firefox)
- It uses the
Cache-Control: no-storeheader 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.
- Right Click on the page and click Inspect to open Chrome DevTools
- Switch to the Application tab
- In the Cache section of the sidebar, select Back/forward cache
- 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.
This status shows that you should make a change to your website to support the back/forward cache.
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.
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.