BFcache: Speed Up Users’ Browsing History Navigation
Back/forward cache (or BFcache) is a browser optimization that enables instant back and forward navigation. It significantly enhances 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 at the moment the user leaves. Since the entire page is stored in memory, the browser can quickly restore it if the user decides to return, rather than re-executing all the network requests needed to load the page.
The following video demonstrates how much BFcache can speed up navigation:
Addy Osmani: BFcache on Chrome for Android
How BFcache Works
The cache used by BFcache differs from HTTP caching, which plays its own role in speeding up repeat navigation. BFcache is a snapshot of the entire page in memory, including JavaScript, whereas HTTP cache only contains responses to previously made requests.
Repeated visits using BFcache restoration are always faster than the most optimized navigation without BFcache. With BFcache, the previous state of the page is displayed nearly instantly.
You can monitor the share of BFcache in page views using Navigation Types in our monitoring PLUS.
Browser Compatibility
BFcache has been supported in Firefox and Safari for many years, both on desktops and mobile devices.
Starting with version 86, Chrome allowed a small percentage of users to use BFcache for navigating between pages on Android. From version 96, BFcache is enabled for all Chrome users on both desktop and mobile.
The Google Chrome Developers Group commented: “The introduction of BFcache brought the biggest CLS improvement we observed in 2022”.
Optimization for BFcache
Not all pages are automatically stored in BFcache, and even when a page is cached there, it doesn’t stay indefinitely. Here we describe the criteria for pages to be eligible for BFcache storage. Developers should evaluate which pages should be cached and which should not. At the same time, the goal is to maximize the number of pages that take advantage of BFcache.
Event unload
Use the pagehide event instead of unload. The most crucial way to optimize for BFcache in all browsers is to never use the unload event listener. Instead, use pagehide.
The unload event must not be used even in third-party JavaScripts. To check if any JavaScript on your pages uses unload, we recommend using the no-unload-listeners audit in Lighthouse.
Unload event audit from 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, such as logged-in pages.
To optimize for BFcache, use Cache-Control: no-store only on pages containing sensitive information that must not be cached.
For pages that always want to 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 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.
In older browsers, 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.
Besides posing a security risk, the page cannot be safely placed in BFcache, as it cannot be unambiguously determined where you came from to this page.
To avoid these risks, use rel="noopener" to prevent creating window.opener links. This is the default behavior in all modern browsers.
Open Connections
Always close open connections before the user leaves.
This applies to cases such as:
- Pages with an open
IndexedDBconnection - Pages with a running
fetch()orXMLHttpRequest. - Pages with an open
WebSocketorWebRTCconnection
Tip: If these tips are not enough, you can watch a video on how to debug and optimize your site for BFcache from Chrome for Developers.
Testing BFcache Functionality
How can you actually test if your web pages will be loaded from BFcache?
DevTools
- Navigate to a specific page in the Chrome browser.
- Then in DevTools, go to the Application > Back-Forward cache menu.
- Then click the Run Test button, and DevTools will show you the status for the specific page.
Page that saves with BFcache.
Page that doesn’t meet the criteria for BFcache storage.
Lighthouse 10
In Lighthouse, one of the audits checks a page’s eligibility for BFcache.
Lighthouse 10
Disadvantages
While BFCache offers numerous advantages for speed and smooth web browsing, there are some downsides 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 can lead to data inconsistencies, especially if interactive elements like forms, shopping carts, or chat windows are present on web pages. Users might see outdated or invalid information if BFCache is not properly updated.
Security Risks
Storing sensitive data in cache 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 people.
Despite these drawbacks, BFCache is a beneficial technology for most users and developers, improving the user experience and efficiency of web browsing.
Impact on Core Web Vitals
BFCache can have a significant impact on Core Web Vitals, which are crucial for evaluating the user experience of web pages by Google.
Largest Contentful Paint (LCP)
BFCache can positively affect LCP by enabling quick display of the main content of the webpage when using back or forward buttons. This can lead to better LCP ratings and enhance the overall user impression.
Cumulative Layout Shift (CLS)
BFCache can positively affect CLS if restoring the page without BFcache causes unexpected content shifts.
Interaction to Next Paint (INP) and First Input Delay (FID)
BFCache can impact INP and FID if the user interacts with the webpage after using back or forward buttons. If the page state is restored from BFCache, it can mean lower FID and also a better INP metric, as the browser does not need to reload and render the content again.
We introduced BFcache during our recent webinar:
Enable BFcache
By removing obstacles to storing pages in BFcache, you gain:
-
Faster Navigation:
BFCache allows the immediate restoration of the web page state when using back or forward buttons, significantly speeding up navigation between pages and improving the overall user experience. -
Data Traffic Savings:
By storing the state of pages in memory, BFCache can minimize the need for repeated loading and rendering of content, leading to reduced data traffic and faster page loading. -
Improved User Experience and Core Web Vitals Metrics:
Thanks to faster loading and smooth navigation, BFCache contributes to the overall improvement of the user experience when browsing the web, leading to higher user satisfaction.