In web performance, we often focus on making the initial load and interactions faster, but what happens when a user wants to go back to a page they just saw?
If your site shows a loading spinner or a blank white screen for even a second, you might be losing users. This is where Back/Forward Cache (bfcache) comes in, and this technique can be a mechanism to plug holes in your site’s conversion funnel.
What is bfcache?
The Back/Forward Cache is a browser optimization that stores a complete snapshot of a page in memory after the user navigates away. Unlike the standard HTTP cache, bfcache retains the entire state of the page in memory, including the JavaScript heap.
When the user clicks the “back” or “forward” button, the browser doesn’t re-download or re-parse anything. It simply loads the page from RAM.
These types of optimizations are my favorite. Browser engineers have put things into the browser that automatically make the web faster, and they are enabled by default. There’s nothing you need to do to enable bfcache, but you do need to avoid doing things that get in the browser’s way and will exclude a page from bfcache eligibility. The web.dev documentation on bfcache explains what those things are.
UX implications
In e-commerce, users constantly jump between product lists and detail pages. If that “back” movement is instant, they stay in the shopping flow longer.
I recently experienced this while I was shopping for new trail running shoes. The video describes what I experienced, and how I would troubleshoot it if I was working on a site that was not eligible for bfcache.
Watch on YouTube.
Troubleshooting
Chrome DevTools now includes an AI Assistant, and I showcased how I might use it to troubleshoot bfcache in the video example. You can get to the new AI Assistant in multiple panels, and in the video, I used the network panel of devtools to asked the following question about the HTML document: “why isn’t this page eligible for bfcache?”
The AI analyzes the request and suggests the specific adjustments needed to make your page bfcache-eligible.
You can even ask it to suggest a fix for a specific issue, which I did in the video. Just remember to test the fix before you deploy it to production.
Conclusion
Performance isn’t just about the first click; it’s about the entire journey. By making sure your pages are eligible for bfcache, you remove the technical hurdles of the network and CPU, creating a browsing experience that feels as fast as a native app.
Check your site today. Your conversion rate will thank you.