What is BF Cache? Well to start with, this is a unique feature which ensures that a snapshot has already been created by the browser of a previously visited web page within their memory. This helps a great deal, if the navigator has to visit the webpage back or forward, in this case, the browser can display it soon enough. So, what does this process appear to be like? Well here goes:

Once a request has been made by a visitor  to load a certain page, the browser undergoes  the following steps:

  • Establishing a connection with the server.
  • Downloading and parsing of the information is created.
  • The Construction of the CSS Object Model (CSSOM) and Document Object Model (DOM).
  • Helps in Rendering the content
  • Develops the page to become more interactive.

Now, what happens when the BF Cache is not enabled for a certain page? Well, this will lead to the fact that each time you have to leave and return to it, then it will take the browser the entire five-step process all over again to accomplish. This results in ‘more time taken’ for a rather simple task. So, what do we do now? Well, you activate the BF cache to start with.

To Enable the BF cache

Likewise, once the BF Cache has been enabled for a certain page, the browser will work by ‘freezing’ the page along with all the resources it includes. Hence, the when you visit it the next time once again, the browser will not ‘lose’ time trying to once again reconstruct and the loading will be done immediately. Now, most experts might argue that while they already have a HTTP Cache set up, do they require the BF Cache as well? To understand this, you need to know about the difference between the two.

The Difference between the BF Cache and the HTTP Cache

To start with, the BF Cache is basically a snapshot of the complete page that has been stored within the memory. This also includes the JavaScript heap. On the other hand the HTTP Cache consists of only those requests that have been made previously. 

Also, you need to bear in mind that not all the resources need to be allowed to be cached within the HTTP Cache. For example, there are certain websites that are unable to cache the HTML documents by itself; but just the resources. This results in the re-downloading of the document each time the visitor needs to load a certain page. 

The other main difference between the BF Cache and the HTTP cache is that difference between the disk cache and the in-memory. 

The Browsers That Support BF Cache

This is some great news, as almost all the browsers support the BF cache: Safari, Crome, Firefox, Opera, Edge among others. This happens generally because the BF Cache is not completely a new concept. It was included by Safari all the way back in the year 2009 and has been supported by Firefox since the launch of its version 1.5. 

The latest to join Cache has been Chrome and Edge, in the year 2020 and a year later in the case of Chrome. So, you see, its a great news that you can connect the BF cache to any browser of your choice. But how is it done? Well, here are the steps:

How to Connect BF Cache to your Browser?

Now that you know that most browser support BF cache, you can get started easily. However to be sure, you still can check the if it works, incase your pages are not being restored as expected. One of the easiest ways to do so, it to run a PageSpeed audit for this purpose. Let us take a look at how this is done:

Using Google PasgeSpeed Audit

After the release of Lighthouse v10 there is available a brand new PSI audit known as the ‘Page Prevented Back/Forward cache restoration”.

However, there are chances that this audit can fail you in case the page tested by you is not able to be restored from the bfcache for some reasons. For this, you need to click on the warnings offered, which is a drop-down menu. This comprises the list of the reasons and the frames that could be the cause of the problem. Let us take a look at the top three main categories of the reasons:

  • Actionable: These can be fixed inorder to enable caching.
  • Pending Support: Chrome is not able to support certain features yet, hence they are avoiding caching. Nevertheless, after being supported, Chrome eliminates these limitations.
  • Not Actionable:  There are certain  issues within  this page. These factors that are not within the control of the page avoids caching.

CONCLUSION

This is all we have at the moment on  What is BF Cache and How to Use it. For more information, do send in your feedback and we would love to hear from you.