Murshid Muzamil

Back Forward cache : What you need to know

What is bfcache?

Imagine you’re browsing an online store, looking at different products. You click on an item to view its details but then decide to go back and continue exploring. Thanks to bfcache, when you return to the previous page, it instantly appears with all the information and images loaded, without having to wait for it to load again from the server.

Back/forward cache (bfcache) is a feature of web browsers that allows pages to be restored from memory after the user has navigated away from them and then back again. This can improve the performance of web pages by reducing the number of times that pages need to be loaded from the server.

This seamless experience saved you time, bandwidth and made your shopping journey smoother.

Let’s delve into the details of this feature, which is supported by modern browsers, including mobile devices.

How does bfcache work?

Bfcache operates by saving a comprehensive snapshot of a page, including the JavaScript heap, in memory as the user navigates away. With the complete page stored in memory, the browser can swiftly and effortlessly restore it when the user chooses to return.

This snapshot encompasses the HTML, CSS, JavaScript, and all other resources essential for rendering the page. Subsequently, if the user navigates away from and subsequently back to the page, the browser can restore it from memory instead of fetching it again from the server.


The PageTransitionEvent plays a role in signaling page transitions, including when a page is being unloaded or when a new page is being loaded. When a user navigates away from a page, such as by clicking a link or using the browser’s back or forward button, the PageTransitionEvent is triggered to notify the page that it is being transitioned out of view.

It encompasses various event types, including “pageshow”, “pagehide”, “beforeunload” and “unload” each corresponding to a specific stage in the page transition process.

This offers developers a way to observe and respond to page transitions within the browser, enabling them to enhance user experiences, implement custom behaviors, and optimize resource management.

Note: The unload event has been available in web browsers for a long time and is triggered when a page is being unloaded, either by navigating away or closing the browser window. On the other hand, the pagehide event was introduced later and provides an additional opportunity for developers to perform actions or cleanup tasks before a page is hidden or unloaded.

How can I make my pages eligible for bfcache?

There are a few things that you can do to make your pages eligible for bfcache:

Note: If there are any unload event listeners on your page, you should convert them to pagehide event listeners

How can I check if my pages are eligible for bfcache?

You can check if your pages are eligible for bfcache using the Chrome DevTools. To do this, open the DevTools and go to the Applications tab. In the Cache section, look for the Back/forward cache entry. If your pages are eligible for bfcache, they will be listed in this section.

You can find more information about testing page optimization for instant loads and identifying issues that may affect eligibility for back-forward cache in the Chrome DevTools documentation.

Limitations of bfcache

What are the benefits?

Bfcache can improve the performance of web pages by reducing the number of times that pages need to be loaded from the server. This can lead to faster page load times, which can improve the user experience.

Key observations

In her recent talk on How to Prioritize Web Performance Optimizations by Melissa Ada, she presented some interesting observations with regard to bfcache. (Slide from Melissa Ada)

The sharp increase in CLS scores for mobile devices in 2022 is believed to be closely related to the introduction of bfcache. The Web Almanac team suspects this as one of the primary factors contributing to the trend.

You can refer to the Web Almanac report for 2022 to explore the detailed analysis and reasoning behind this correlation. It aligns with the launch of bfcache on Chrome in late 2021.


Murshid Muzamil writes about Web Performance Optimization, you can follow him on twitter via @murshidmuzamil