What is Back Forward Cache (bfcache)? | Improve Website Speed & UX

With an attempt to keep up with the user experience, internet usage needs in terms of speed and efficiency, the internet is evolving rapidly. One of the several innovations to improve browsing performance is the Back Forward Cache also known as bfcache, which has been recognized for improving navigation times significantly when users wish to go back or forward in their browser history.

We’ll uncover what bfcache is, how it works, what forwarded means in browser navigation, how to use the on-off switch for caching in Chrome, the impact this cache mechanism will have on websites, and in this dynamic landscape how Quantum IT Innovation can help optimize your website's performance.

What is Back Forward Cache (bfcache)?

To help pages load much faster, bfcache or Back Forward Cache is a feature that saves the last accessed pages in a temporary storage and thus shifts the burden away from the traditional hard drive. It overcomes the problems related to the performance gaps in the last case. When the user clicks either back or forth, the performance gap is effectively eliminated. This is achieved because no matter how many times a user makes use of the back or forward button, the page’s performance gets revived instantly.

This results in:

Faster page load times
Better user experience
Reduced server requests

It’s different from a typical cache because it retains the entire document and JavaScript state. In contrast, traditional caches only store assets like images, CSS, and JS files.

What is the Importance of bfcache?

For merchants, customer experience has always mattered the most. Customers on a website, and especially on e-commerce, booking, and interactive apps, tend to jump back and forth to several pages by clicking internal links to preview or explore different products and services before making a decision. This “back and forth” movement may appear effortless from a high-level view, but in reality has a tangible impact on the perception of smoothness, responsiveness of your website, and overall user experience.

Without bfcache (Back/Forward Cache), a user’s previous page is rendered anew after every visit. This involves reprocessing the HTML, reexecuting the JavaScript, refetching the resources, and waiting to some degree for the server to respond. Users, on the other hand, experience noticeable delays especially on pages that are dynamically loaded (e.g, third party integrations, or server side rendered pages).

Everything changes, however, when bfcache is enabled.

Users can now navigate back and forth between pages almost instantly. Pages that are stored in bfcache are not reloaded; they are restored precisely in the state which the user left them.
Preserved scroll positions, input, and even dynamic elements. For example, if a user had filled out half a form and made the mistake of navigating away, they can return to where they left immediately after clicking “back.”
Open tabs, expanded dropdowns, or modal states remain untouched. The entire session resumes without visual disruptions or data loss.
It gives the user the impression that he has not left the page in any way. This creates an effortless experience in browsing the website which reduces bounce rates and increases customer satisfaction.

This user experience is particularly important for:

E-commerce platforms, where customers navigate to listing pages, product filters, and more.
Online reservation systems, where users look at many different options before making a selection.
Interactive dashboards or web apps that are data intensive, where state needs to be managed effectively for good usability.
Content sites and blogs, where users switch from article previews to full texts with the expectation of no delays.

Also, Read

How Does Back Forward Cache Work?

The Back Forward Cache also known as bfcache is a unique operating system feature of a web browser, created specifically to improve User Experience by speeding up Back and Forward navigation significantly, enabling the clicking of these buttons almost instantaneously. But what exactly goes on behind the curtain?

When a user first visits a site and later (i.e. clicks on some link to a different page) leaves, resources associated with the current page are normally released. In most cases, clicking back or forward results in a flicker-inducing and slow reload from the network or traditional cache.

In bfcache, however, the browser captures a snapshot of the page’s state when the user navigates away. This snapshot includes:

The entire DOM hierarchy as all the elements are displayed.
The entire JavaScript context which includes the variables, event listeners as well.
The positions of the scroll bars, values in the form fields, and other user interface elements.
Images, styles, and scripts that have already been loaded and are stored in memory.

This is kept in a specially tailored cache that uses random access memory unlike the traditional caches stored on disk for static resources. When the user pushes the forward or back button, the click event is captured and passed to this in-memory cache, which retrieves the snapshot. This results in no reload, no resource fetching, no script execution, instant display and the state the page was left at.

Eligibility and Limitations

Not all web pages have bfcache functionality enabled. Caching can lead to neutral or unwanted behaviors, and even security issues, which is why Chrome has set rules to bfcache functionality. A few key conditions for a page to be eligible are, for example:
No connection to the internet: Pages that have active persistent relationships with the internet such as Websocket or Server-Sent Events are usually disqualified since they need to be kept alive or tidily terminated which contradicts caching.
No unload or beforeunload event listeners: If a page registers these events (normally used for cleanup or warning the user), the browser presumes it needs to do something when leaving the page. Since the bfcache doesn’t reload the page but restores it from memory, these actions can’t happen as intended, so these pages are omitted.
No overrides of navigation events: any scripts that directly manipulate (block) navigation or rely on the need to reload will disable the page cache. This includes intercepting the back button as well as history rewriting that would confuse the browser.

What does “Forwarded” mean in Browsers?

Within the scope of backforward navigation, “forwarded” is usually referring to moving to the next page in the user's browsing history. It is the opposite of “back”.

Let’s say:

Visit Page A → Browse Page B → Visit Page C. Now, go back to Page B, and click “forward.” This sends you to Page C.

If bfcache is functioning correctly, Page C will open instantly without any flicker or reload.

How is bfcache Different from Other Caches?

The Back Forward Cache (bfcache) differs from other forms of cache in some crucial ways:

Focus on Storage: Static assets such as images or CSS files are stored in a cache so that they can be used to load a webpage faster. However, with bfcache, there is no static asset storage because it does not cache individual Assets, but keeps the entire page state.
Preservation of Full Page State: Unlike bfcache, caches store components such as the DOM, JavaScript state, user inputs and all the other elements. They do not allow the page to be restored precisely as it was left. bfcache however does retain all of those elements.
Scroll Position: Static caches do not retain scroll position on the webpage which means, if you return back to the page, you will start from the very top. With bfcache, you scroll exactly where you left off.
Instant Reloading On Back And Forward Navigation: With traditional caches, the Browser has to render and reload resources which causes delays when using back or forward navigation. In contrast, bfcache will instantly restore the page using memory which means no reloading is needed.
State of JavaScript Execution: Scripts are reserved with static caches which means variables are reset meaning upon reload, the new scripts are executed. bfcache preserves JavaScript allowing the dynamic content to remain unchanged as the user controls the content without changing elements.

Also, Read

How to Enable Chrome Caching

If you are looking to back forward enable Chrome, either as a developer or as a user, here’s the step you need to follow.

The default behavior for Chrome is enabling bfcache starting with version 96+. You can, however, turn it on manually from flags:

Open Chrome and go to the address bar. Type: 'chrome://flags/#back-forward-cache' and search.
For your desired platform (desktop or Android), toggle the flag on.
You can then restart the browser.

How To Disable Chrome Caching

In some development scenarios you may want to disable Chrome caching altogether.

To do this, you need to go to dev tools by right clicking, then navigating to the network tab. From there check “disable cache” (only works when dev tools are open).
To completely disable bfcache, type 'chrome://flags/#back-forward-cache' in the address bar.
From there, set the flag to disabled and relaunch Chrome.

Note: Disabling back forward cache may affect some form of performance and not be ideal for certain regions that require stability.

Developer Problems Regarding Bfcache

While bfcache does speed up browsing, it branches out some problems for the developers:

JavaScript Events: In bfcache, pages are stored in memory, and with that, events such as onload or DOMContentLoaded do not get rendered again, meaning developers need to use page show events to properly manage the restoring of pages.
Timers and Intervals: Active timers such as setInterval may continue to run, unexpectedly resulting in duplicate or unsynced actions after restoration.
Authentication and Sensitive Data: Private information pages like login screens may need to disable bfcache to avoid sensitive information being cached.
Third Party JavaScript: External scripts like Analytics will not work properly because they usually rely on a reset page reload.

Best Practices to Maintain Compatibility with bfcache

Ensure your website uses the backforward cache by:

Refrain from using unload event listeners.
Use pagehide and visibilitychange instead.
Do not maintain long-lived outbound connections, like WebSockets.
Do not call document.write() after the page has been loaded.
Use the Performance panel in Chrome’s DevTools to test your pages.

bfcache on Mobile Browsers

Other than Chrome for Android, modern mobile browsers Safari on iOS have also added support for bfcache. This is important because:

Mobile connections are often slow.
Users on mobile devices tend to jump back-and-forth more often.
Pages load instantly which improves UX and reduces frustration.

Redesigning your website to enhance mobile back forward performance is no longer an option, but rather, vital.

What Makes Quantum IT Innovation Stand Out?

At Quantum IT Innovation, we specialize in Business optimization solutions, Web and App Development & Digital Marketing for B2B and B2C agencies and companies across the USA, UK, Canada, Australia, Ireland, and the Middle East.

We assist businesses to stay ahead of the competition by optimizing web technologies like caching, responsive design, and efficient back-end integration.

We Offer The Following Services:

Website Development and Optimization – We build responsive ranking websites, ensuring they pass all necessary performance tests.
Mobile Application Development – We develop user-friendly, secure mobile applications for Android and iOS systems.
Tailor-Made Software Solutions – We develop software tailored to your business needs.
User Interface and Experience Design – We enhance the client experience by developing captivating interfaces through seamless interactions.
Holistic Digital Marketing – We create reachable online goals and dominate the market by utilizing SEO, PPC, social media, and content marketing.

We have unparalleled ability when it comes to fast building mobile applications, SEO optimized websites, and yes, that includes full bfcache compatibility for a seamless user experience. Contact us today to get a free consultation.

Conclusion

The Back Forward Cache (bfcache) is a performance enhancement that goes unnoticed by the majority of users, which is exactly what is desired. The cfcache improves user experience by instantly restoring pages during back and forth navigation which reduces load time and state preservation.
Learning how cache back works is beneficial for both new and existing web applications. Whether it is enabling back forward navigation or disabling Chrome caching, utilizing these skills improves the web for every user.
Quantum IT Innovation is here to give you the extra push needed to take your website to greater heights. Together, we can achieve a web experience that is faster, smoother, and smarter just as users expect. Get in touch with us now so we can make it happen.

Frequently Asked Questions

1. What is the difference between backforward cache and traditional cache?

Back and forward cache or bfcache is unique because it cements the state of a page while traditional caches only cement static asstes such as images or scripts. For example, bfcache saves the entire page, its active DOM, the JavaScript as well as the page’s state to enable instant restoration. There is an advantage of smoother user experience navigation as opposed to sluggish reloads.

2. Is there any method that allows checking if bfcache is being utilized on my website?

Simply take a look at it using the Performance tab in Chrome DevTools. Perform your scrolling and check for the phrase “bfcache restore” during backward and forward paging. If it is not used, Chrome will show you the reason why the page was not eligible. This assists developers in troubleshooting and refining their systems in regard to bfcache.

3. Is it possible for bfcache to impact the analytics tracking?

Of course. Since the page does not reload, operations like analytics on the page will not be executed as expected. The best way to deal with this is to track these events with pageshow and pagehide in those cases. Altogether configured analytics help ensure no back and forward visits or actions are missed in the triggers' logic.

4. Should bfcache be used on security sensitive pages such as login areas?

Not in every case. Personal data which desktop users might not want to leave exposed or logged into the machine might not be safe to cache. Using Cache-Control: no-store or Unload handlers will bar the use of bfcache, but disable caching. Use the performance impact of the system as a last focus in these cases one must slash first and foremost breathe security bounds.

5. Does bfcache work in all browsers?

Most modern browsers like Chrome, Safari, and Firefox support bfcache to varying degrees. Ensure your website meets compatibility requirements, and test thoroughly across browsers for consistent performance. Keeping up with browser updates helps maintain optimal support for caching features.