Back/forward cache: Optimize your pages for instant loads when using the browser’s back and forward buttons
Back/forward cache (BFCache) is a browser optimization technique that significantly improves the browsing experience for users, especially those with slower networks or devices. BFCache enables instant back and forward navigation, reducing the time and data usage involved in loading web pages.
Browser Compatibility:
BFCache has been supported in both Firefox and Safari for many years across desktop and mobile devices. In Chrome, BFCache was first enabled for cross-site navigations on Android for a small percentage of users starting in version 86. Subsequent releases of Chrome gradually rolled out additional support, and since version 96, BFCache has been enabled for all Chrome users across desktop and mobile devices.
BFCache Basics:
BFCache is an in-memory cache that stores a complete snapshot of a page, including the JavaScript heap, as the user navigates away from it. This complete snapshot of the page enables the browser to quickly and easily restore it if the user decides to return, reducing the time and data usage involved in reloading the page.
Impact of BFCache:
BFCache has a significant impact on the browsing experience, as demonstrated in a video that shows the speed difference between navigating with and without BFCache. Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward. With BFCache enabled, browsers could eliminate the data transfer and time spent loading billions of web pages every day.
Importance for Web Developers:
- As web developers, it’s important to understand how to optimize their pages for BFCache across all browsers to provide the best possible experience for their users.
- This includes understanding how BFCache works and how to make sure your pages are optimized to take advantage of its capabilities.
BFCache is a powerful optimization feature that significantly improves the browsing experience by enabling instant back and forward navigation and reducing data usage. Web developers should understand how to optimize their pages for BFCache to provide the best possible experience for their users.
How the “Back/Forward Cache” Works #
Cache in bfcache #
The cache used by bfcache is different from the HTTP cache. The bfcache cache is a complete snapshot of a page stored in memory (including the JavaScript heap), whereas the HTTP cache only contains responses for previously made requests. Using the bfcache cache for repeat visits is always faster than non-bfcache optimized navigations, even if the HTTP cache is well optimized.
Preserving In-Progress Code #
Storing a complete snapshot of a page in memory involves preserving in-progress code, which involves some complexity. For instance, how should the browser handle setTimeout() calls where the timeout has been reached while the page is in the bfcache? Browsers solve this by pausing all pending timers or unresolved promises, essentially all pending tasks in the JavaScript task queues, and then resume processing tasks when the page is restored from the bfcache.
Potential Risks #
In some cases, pausing and resuming tasks is low-risk, but in other cases, it may lead to confusing or unexpected behavior. For instance, pausing a task involved in an IndexedDB transaction may affect other open tabs in the same origin since the same IndexedDB databases can be accessed by multiple tabs at the same time. As a result, browsers will not attempt to cache pages that are in the middle of an IndexedDB transaction or using APIs that may affect other pages.
Optimizing Pages for bfcache # For more information on how to optimize your pages for bfcache and how various API usage affects a page’s bfcache eligibility, see the “Optimize your pages for bfcache” section.
