BFcache: speed up users' browsing history

The back/forward cache (or BFcache) is a browser optimization that allows for instantaneous backward and forward navigation. It significantly improves the browsing experience, especially for users with slower networks or devices.

What is BFcache

BFcache is a browser cache that stores a complete snapshot of a page when the user exits. Because the entire page is cached, the browser can quickly refresh it if the user decides to return, rather than having to repeat all the network requests needed to load the page.

The following video shows how much BFcache can speed up navigation:

Addy Osmani: BFcache on Chrome for Android

How BFcache works

The cache used by BFcache is different from the HTTP cache, which plays its own role in speeding up repeated navigations. The BFcache is a snapshot of the entire page in memory, including JavaScript, while the HTTP cache only contains responses to previously executed requests.

Repeat visits using BFcache refresh are always faster than the best optimized navigation without BFcache. With BFcache, the previous state of the page is essentially displayed immediately.

Browser compatibility

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

Starting with version 86, the Chrome browser has allowed a small percentage of users to use BFcache to navigate between pages on Android. As of version 96, BFcache is enabled for all Chrome users on both desktop and mobile.

Developer Group Google Chrome had this to say: "The introduction of BFcache caching caused the biggest CLS improvement we've seen in 2022".

Optimizing for BFcache

Not all pages are automatically cached in BFcache, and even if a page is cached there, it won't stay there indefinitely. Here we describe what makes a page eligible for BFcache caching. It is up to the developer to evaluate which pages should and should not be cached in BFcache. At the same time, the number of pages that use BFcache should be maximized.

Event unload

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

The unload event must not be used in 3rd party JavaScript either. To determine if any JavaScript on your site uses unload, we recommend using the no-unload-listeners audit in Lighthouse.

alt_text Audit on Unload event from Lighthouse test

Cache-Control: no-store

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

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

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

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

alt_text Using Cache-Control: no-cache will ensure that d BFcache is saved.

Window.opener

Avoid references to window.opener.

In older browsers, if a page was opened with window.open() from a link with target=_blank without specifying rel="noopener", the opened page contained a link to the open page's window object.

In addition to being a security risk, this makes it unsafe to place the page in BFcache, since you cannot unambiguously determine where you came to the page from.

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

Open links

Always close open connections before the user leaves.

This applies when:

Pages with an open IndexedDB connection.
Pages with a fetch() or XMLHttpRequest in progress.
Pages with an open WebSocket or WebRTC connection.

Tip: If these tips aren't enough, you can watch the how to debug and optimize your site for BFcache video from Chrome for Developers.

Testing BFcache functionality

How can you actually test your website to see if it will load from BFcache?

DevTools

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

alt_text Page that is stored with BFcache.

alt_text A page that does not meet the conditions for saving to BFcache.

Lighthouse 10

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

alt_text Lighthouse 10

Disadvantages

While BFCache brings a number of benefits to the speed and fluidity of web browsing, 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 overall browser memory consumption, especially on resource-constrained devices such as mobile phones or older computers.

Possible data inconsistencies

There is a risk that having BFCache enabled may lead to data inconsistencies, especially if a website contains interactive elements such as forms, shopping carts, or chat windows. Users could see outdated or invalid information if 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 potential for sensitive information to be misused if it is stored in the BFCache and then accessed by unauthorized persons.

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

Impact on Core Web Vitals metrics

BFCache can have a big impact on Core Web Vitals, which are key to Google's evaluation of a website's user experience.

Largest Contentful Paint (LCP) BFCache can positively impact 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 scores and improve the overall user experience.

Cumulative Layout Shift (CLS)
BFCache can positively affect CLS if refreshing a page without BFcache causes unexpected content shifts.

Interaction to Next Paint (INP) and First Input Delay (FID) BFCache can affect INP and FID if the user interacts with the web page after using the back or forward buttons. If the page state is restored from the BFCache, this can result in a lower FID and also better INP metrics because the browser does not have to reload and render the content.

We introduced BFcache in our recent webinar:

Turn on BFcache

By removing the barriers to saving pages to BFcache, you get:

Faster navigation: BFCache allows instant refresh of the web page state when using the back or forward buttons, greatly speeding up navigation between pages and improving the overall experience for the user.
Saving data traffic: **
By storing page state in memory, BFCache can minimize the need to reload and re-render content, resulting in reduced data traffic and faster page loads.
Improving user experience and Core Web Vitals metrics: \
With faster loading times and smoother navigation, BFCache contributes to an overall improved user experience when browsing the web, leading to higher user satisfaction.