What is BF Cache? Exploring the Key Benefits of Using BF Cache for a Better User Experience
The bf cache (back / forward cache) is a web browser optimization that is used to enable instant back and forward navigation. It improves the browsing experience, especially for the user who has a slower network or has a slower device.
According to Chrome Usage Data, 1 in 10 navigation on desktop and almost 1 in 5 on mobile are either back or forward. Now, how can you ensure that after navigating back and forward to the web page, they load immediately? That is when the bf cache comes into play!
Here we will cover the concept of bf cache and the key benefits of using this for a better user experience.
Page Contents
What is bf cache?
A bf cache (also known as back/forward cache) is a feature that allows the browser to create a snapshot of a visited web page and store it in their in-memory. It is used when the user navigates back or forward between the web page.
Let’s understand it with an example, suppose you have performed a Google search to find some information & clicked on a particular search result to find the some information, but you are not happy with the information & press the back button to go back to the search results, now instead of loading the page again the browser would show saved snapshot.
When a user visits a web page, the browser first downloads and parses the resource files of the content such as HTML files and CSS stylesheets. Then render the webpage content. And finally, JavaScript makes the page interactive.
If the back-forward cache is not enabled for a web page, that means every time the user leaves the page and navigates back to it, the browser will go through the whole process. It will decrease the pagespeed performance of the website.
Check out: Cache vs Cookie
Which browsers support bf cache?
In web technology, bf cache is not a new concept. Safari (a web browser developed by Apple) added this feature in 2009.
Now, almost all browsers support the back/forward cache. Here we are mentioning some popular browsers.
- Chrome
- Firefox
- Edge.
The difference between an HTTP Cache and a bf Cache?
- HTTP cache or disk cache is used to store the static resources of the webpage content such as HTM files and CSS files to avoid the redownloading of these static resources.
- Whereas the bf cache is more comprehensive. It stores the snapshot of the entire webpage including JavaScript in the in-memory.
In the HTTP cache, not all static resources are allowed to be cached. As a result, every time the user visits the website, the browser needs to re-download the content. With the help of the bf cache, this issue can be avoided.
How to check if your website can be served from the bf cache?
There are various ways that you can check if your website can be served from the backforward cache or not. Here we would check this in two most popular ways to check the website.
- Using Chrome DevTools:
Chrome DevTools allows you to check whether the web page is eligible for the bf cache. To check this you need to follow these 5 steps.
Step 1: Visit the page you want to test in Chrome DebTools.
Step 2: Right-click on the page and click on Inspect option or you can press F12.
Step 3: click on the Application option.
Step 4: Select the Back/forward cache in the Background services sections.
Step 5: Click on Test back/forward cache.
Then DevTools allows you to see the status indicating whether the website can use bf cache.
- Using Google PageSpeed Insights:
Another option is to use Google PageSpeed Insights, to check if the website can be served from the back forward cache or not.
If the tested web page cannot be restored from the bf cache, the audit will fail. By clicking on the warning, you can see a drop-down menu with the failure reasons.
View more: Immutable Caching
These failure reasons can be categorized into three parts.
Actionable indicates you can make changes to the website to support the back-forward cache.
Pending Support shows that the web page isn’t eligible for the bf cache for now. But in the future chrome supports it.
Not Actionable indicates you can’t fix this issue on the webpage.
The Most common issues that prevent bf cache
At this point, you have a brief idea about the bf cache. The main reason that prevents bf caching are:
- Using Cache-Control: no-store header in your JavaScript code
The Cache-Control HTTP header holds the instructions for both HTTP requests and HTTP responses. No-store header in cache-control will disable all caches.
- Using Unload event in JavaScript:
The unload event occurs when users navigate away from the web page such as submitting a form, clicking a link, entering a new URL, etc.
During the unload event JS code can execute the task before the web page unloads such as saving the data.
5 Strategies to optimize a web page for bf cache
Here we are mentioning the best strategies that you can apply to fix the issues that prevent back forward cache.
1. Use cache-control: no-store only for the information-sensitive page
If the webpage contains some sensitive information and caching is not needed then use cache-control: no-store to prevent it from being eligible for the bf caching.
Code for node js server:
app.use((req,res,next) =>
{
res.setheader(‘Cache-Control’, ‘no-cacche’);
next();
});’For a wordpress website, you can use plugins like Cache-control, Cache control by Cacholong, LH Add Headers, etc. to optimize a web page for bf cache.
On the other hand, if the content of the web page is not static then also cache-control: max-age() is used.
2. Update sensitive data after bf cache restore to optimize a web page for bf cache
A bf cache should not be used on web pages that contain sensitive data. Especially when a user visits the website from a public computer, the next user should not be able to visit that page by just clicking the back button.
componentDidMount() {
console.log('componentDidMount')
window.addEventListener('pageshow', (event) = {
console.log('PAGE_SHOW');
if (event.persisted) {
console.log('PAGE_SHOW_PERSISTED');
}
});
}You can achieve this by using event.persisted after a pageshow event.
See more: Cache Policy for static assets
3. Avoid using the unload event to optimize a web page for bf cache
The most common way to optimize the bf cache is to avoid using the unload event. Instead of using the unload event, you can use the pagehide event in the method like addEventListener() to detect when a webpage is visible or hidden to a current user.
window.addEventListener('click', warnAboutLostChanges);
function bindWarnAboutLostChanges() {
window.addEventListener(
'beforeunload',
function(e) {
if (shouldWarnYouLogic()) {
e.preventDefault();
return "You have unsaved changes!";
}
}
);
window.removeEventListener('click', warnAboutLostChanges);
}4. Carefully adding beforeunload listeners to optimize a web page for bf cache
The beforeunload event is used to display a warning dialog box to inform users whether they want to leave the current page. Chrome and Safari will allow beforeunload event but Firefox will flag the webpage as ineligible for back forward cache.
5. Use rel=”noopener” in your script to optimize a web page for bf cache
The rel=”noopener” attribute is used to prevent the current page from being able to access the window.opener property. Instead of using a window.postMessage(), you should use rel=”noopener”.
Conclusion
Here, we cover the key benefits of using bf cache and the strategies to fix it. The benefits of a website serving from the bf cache are to reduce data usage, improve core web vitals, and a better user experience.
To optimize your web page for bf cache by applying the mentioned strategies like Using cache-control: no-store only for the information-sensitive page, Updating sensitive data after bf cache restore, Using rel=”noopener” in your script, Avoiding using the unload event, Using rel=”noopener” in your script.
Now, it’s your turn to apply these powerful strategies to your website and make your website more user-friendly. It will also increase the website’s conversion rate.
