BFcache: Accelerate User Navigation Through Browsing History

The back/forward cache (or BFcache) is a browser optimization that allows instant back-and-forth navigation. It significantly enhances the browsing experience, particularly for users on slower networks or devices.

What is BFcache#

BFcache is a browser cache that stores a complete snapshot of a page when the user leaves it. By having the entire page stored in memory, the browser can quickly restore it if the user decides to return, rather than repeating all the network requests needed to load the page.

The following video demonstrates just how much BFcache can speed up navigation:

Addy Osmani: BFcache on Chrome for Android

How BFcache Works#

The cache used by BFcache is distinct from the HTTP cache, which plays its own role in speeding up repeat navigations. BFcache is an in-memory snapshot of the entire page, including JavaScript, while the HTTP cache contains only responses to previously made requests.

Revisiting pages via BFcache restoration is always faster than the best-optimized navigations without BFcache. With BFcache, the previous state of the page is essentially displayed instantly.

For one of our clients, Key4you.cz, we activated BFcache, allowing 16.5% of mobile users to benefit from it. After accounting for TTFB (server response time), the LCP metric for the entire domain dropped by 60 ms.

Browser Compatibility#

BFcache has been supported for many years in both Firefox and Safari, on desktops as well as mobile devices.

Starting with version 86, Chrome allowed a small percentage of users to use BFcache for page navigation on Android. Since version 96, BFcache has been enabled for all Chrome users on both desktop and mobile.

The Google Chrome Developers group stated: “The introduction of BFcache resulted in the largest improvement in CLS we recorded in 2022”.

Optimisation for BFcache#

Not all pages automatically store in BFcache, and even when a page is stored, it doesn't remain indefinitely. Here we describe what determines a page's eligibility for BFcache storage. Developers should evaluate which pages should be stored in BFcache and which shouldn't, aiming to maximize the number of pages benefiting from BFcache.

Event Unload#

Use the pagehide event instead of unload. The most crucial way to optimize for BFcache in all browsers is never to use the unload event listener. Instead, use pagehide.

The unload event must also not be used in third-party JavaScripts. To check if any JavaScript on your pages uses unload, we recommend using the no-unload-listeners audit in Lighthouse.

Audit for the Unload event from the Lighthouse test

Cache-Control: no-store#

Minimize the use of Cache-Control: no-store and prefer Cache-Control: no-cache or Cache-Control: max-age=0.

Cache-Control: no-store is an HTTP header that web servers can set on responses, instructing the browser not to store the response in any HTTP cache. It is used for resources containing sensitive user information, like pages behind a login.

To optimize for BFcache, use Cache-Control: no-store only on pages containing sensitive information that should not be cached.

For pages that should always display current content but do not contain sensitive information, use Cache-Control: no-cache or Cache-Control: max-age=0. These instruct the browser to revalidate the content before displaying it and do not affect the page's eligibility for BFcache.

Using Cache-Control: no-cache ensures storage in BFcache.

Window.opener#

Avoid links to window.opener.

If a page was opened using window.open() from a link with target=_blank without specifying rel="noopener", the opened page contained a reference to the window object of the opening page in older browsers.

Besides presenting a security risk, the page cannot be safely placed in BFcache because it cannot be unequivocally determined where you came from to reach this page.

To avoid these risks, use rel="noopener" to prevent creating window.opener references. This is the default behavior in all modern browsers.

Open Connections#

Always close open connections before the user leaves.

This pertains to cases such as:

• Pages with an open IndexedDB connection
• Pages with an ongoing fetch() or XMLHttpRequest.
• Pages with an open WebSocket or WebRTC connection

Tip: If these tips are not enough, you can watch a video on how to debug and optimize the web for BFcache by Chrome for Developers.

Testing BFcache Functionality#

How can you actually test whether your web pages will load from BFcache?

DevTools#

• Navigate to a specific page in the Chrome browser.
• Then in DevTools, go to the Application > Back-Forward cache menu.
• Click the Run Test button, and DevTools will show you the status for the specific page.

A page that is stored with BFcache.

A page that does not meet the conditions for storing in BFcache.

Lighthouse 10#

In Lighthouse, one of the tests in the audit checks the page's eligibility for BFcache.

Lighthouse 10

Disadvantages#

While BFCache offers numerous advantages for web browsing speed and smoothness, there are some drawbacks associated with this technology:

Memory Consumption#

BFCache requires a certain amount of memory to store the state of web pages, which can increase the overall memory consumption of the browser, especially on devices with limited resources, such as mobile phones or older computers.

Possible Data Inconsistencies#

There is a risk that enabled BFCache may lead to data inconsistencies, especially if interactive elements such as forms, shopping carts, or chat windows are present on web pages. Users might see outdated or invalid information if the BFCache is not properly updated.

Security Risks#

Caching sensitive data can pose a security risk, especially if the device is shared or not properly secured. There is a possibility that sensitive information could be misused if stored in BFCache and then accessed by unauthorized persons.

Despite these disadvantages, BFCache is a beneficial technology for most users and developers, improving user experience and web browsing efficiency.

Impact on Core Web Vitals#

BFCache can significantly impact Core Web Vitals, which are key to evaluating the user experience of web pages by Google.

Largest Contentful Paint (LCP)
BFCache can positively affect LCP by allowing the main content of a web page to be displayed quickly when using the back or forward buttons. This can lead to better LCP ratings and improve the overall user impression.

Cumulative Layout Shift (CLS)
BFCache can positively impact CLS if page restoration without BFcache causes unexpected content shifts.

Interaction to Next Paint (INP) and First Input Delay (FID)
BFCache can influence INP and FID when a user interacts with a web page after using the back or forward buttons. If the page state is restored from BFCache, it may mean a lower FID and also better INP metric, as the browser does not need to reload and render content again.

We introduced BFcache in our recent webinar:

Enable BFcache#

By removing obstacles to storing pages in BFcache, you gain:

1. Faster Navigation:
   BFCache allows instant restoration of the web page state when using back or forward buttons, greatly speeding up navigation between pages and enhancing the overall user experience.

2. Data Traffic Savings:
   By storing page states in memory, BFCache can minimize the need for repeated loading and rendering of content, leading to reduced data traffic and faster page loads.

3. Improved User Experience and Core Web Vitals Metrics:
   With faster loading and smooth navigation, BFCache contributes to the overall improvement of the user experience when browsing the web, leading to higher user satisfaction.