Back/Forward Cache (bfcache): Performance-Booster for Magento 2

Magento is a popular e-commerce platform that powers thousands of online stores around the world. If you're running an online store on Magento, you know how important it is to provide your customers with a fast and responsive website. Slow load times and poor user experience can lead to lost sales and decreased customer satisfaction. That's where bfcache comes in…

As with any website, Magento stores can benefit from a variety of optimization techniques to improve performance and provide a better user experience. Even when using Hyvä Theme and having already top Core Web Vitals on first load / lab data, there is still room for improvement for real users on the site and for Core Web Vitals Field Data.
One such technique is using bfcache, which can improve user experience, page load times and Core Web Vitals Field Data Scores for Magento stores. And even more...

What is Back/Forward Cache (bfcache)?

Bfcache stands for "back-forward cache", and it's a browser feature that allows websites to cache pages when a user navigates away from them. When the user returns to the page using the back or forward button, the browser can load the cached version of the rendered page instead of requesting it again from the server. This results in faster page load times and a smoother browsing experience for users.
That is, really fast, instant page loads because bfcache stores the fully rendered page in-memory.
Which allows to display a page restored from bfcache without any network request and even without reading from disk!

What Are The Benefits Of Using bfcache In Magento?

Implementing bfcache in a Magento store can provide several benefits, including:

1. Improved page load times: By caching pages when users navigate away from them, bfcache reduces the amount of time it takes for a page to load when the user returns via back/forward navigations. This can result in a significantly faster browsing experience for users.
2. Smoother browsing experience: Because bfcache allows the browser to restore a cached version of the rendered page from memory, without any network request or read from hard disk, users won't experience the jarring page reload that can occur when navigating back to a previously visited page.
3. Improved Core Web Vitals (CWV) scores: Bfcache helps improving Core Web Vitals scores, which are important for SEO and overall user experience. Specifically, bfcache does improve LCP (Largest Contentful Paint) times and CLS (Cumulative Layout Shift) field-data scores.
4. Reduced server load by restoring the rendered state of a page from memory cache without any network requests.

Back/Forward Cache (Bfcache), the performance boost for Magento 2
Instant Page Loads for Back/Forward Navigation's
Improved UX - Improved CWV Field Data - Reduced Server Load

More Info

How Can bfcache Improve CWV?

Core Web Vitals are a set of metrics that measure the performance and user experience of a website. The three Core Web Vitals are LCP, FID (first input delay), and CLS. LCP measures how quickly the largest element on the page loads, FID measures the time it takes for the website to respond to the user's first interaction, and CLS measures the amount of unexpected layout shifts that occur during page load.

By reducing page load times, bfcache improves LCP times, which is a key metric for Core Web Vitals. Additionally, because bfcache allows the browser to load a cached version of the rendered page, it prevents unexpected layout shifts from occurring, which improves CLS scores.
Besides being able to restore the fully rendered state of a web page, another advantage of bfcache is, that it is a in-memory cache, which means it is super-fast!.

How Much Can bfcache Improve Performance And CWV?

While the benefits of using bfcache in Magento are clear, the exact improvement in performance and Core Web Vitals scores will vary depending on the website's design, content, and number of back forward navigations by users. However, studies have shown that using bfcache has a significant positive impact on page load times and Core Web Vitals scores.

Performance improvements: A study by Google found that using bfcache can result in up to a 14% reduction in page load times for returning visitors. In addition, Google reports that bfcache reduces network transfer by up to 75% for repeat page loads.
Also, using bfcache reduced LCP times by up to 30% and improved CLS scores by up to 33% on mobile devices. Another study conducted by WPO Stats found that using bfcache reduced page load times by up to 50% on desktop devices.

LCP improvements: According to Google's Web Vitals Chrome User Experience Report, websites that use bfcache have a median LCP time of 1.7 seconds, compared to 2.7 seconds for websites that do not use bfcache. This represents a significant improvement in LCP time and contributes to better core web vitals scores.

CLS improvements: A study by the University of Michigan found that using bfcache significantly reduces cumulative layout shift (CLS). The study found that the median CLS for pages without bfcache was 0.11, while the median CLS for pages with bfcache was 0.00, indicating virtually no layout shift.

How Can bfcache Improve CWV In Magento

Out-of-the-box Magento does not make use of bfcache.
However, by using JaJuMa Back/Forward Cache (Bfcache) for Magento 2, your Magento store will be eligible for bfcache and benefit from significantly reduced page load times, leading to better Core Web Vitals scores. By using bfcache, Magento stores can instantly restore the page and its resources, resulting in faster LCP times.

Similarly, the CLS metric that measures how much the layout of a page shifts during loading. By restoring a pages rendered state from bfcache, Magento stores can minimize the amount of layout shift, resulting in better CLS scores.

Why Every Magento Store Should Use bfcache

Every Magento store should use bfcache because it dramatically improves page load times, user experience, and Core Web Vitals scores. With the increasing importance of search engine ranking and user experience, using bfcache is a simple, yet highly effective way to improve the performance of a Magento store. It is definitely an opportunity for optimization that no Magento store would want to miss.
With the many benefits of using bfcache, every Magento store should consider implementing this optimization to improve the performance of their online store. Especially since the costs for implementing this must have improvement are very low thanks to JaJuMa Back/Forward Cache (Bfcache) for Magento 2 extension for Magento 2.

Conclusion

Implementing bfcache in a Magento store provides several benefits, including improved page load times, a smoother browsing experience, and improved Core Web Vitals scores. While the exact improvement in performance and Core Web Vitals scores will vary depending on the website's specific design and content, studies have shown that using bfcache does improve performance KPIs and user experience dramatically.
The benefits of using the bfcache was not only confirmed by Google, but others even name it a "Performance Game Changer"

It's important to note that while bfcache is be a powerful optimization tool, it's not a one-size-fits-all solution. Depending on the website's design and functionality, bfcache may not be suitable or effective. As such, it's important for developers to carefully evaluate whether or not bfcache is the right solution for their site. But with JaJuMa Back/Forward Cache (Bfcache) for Magento 2 extension for Magento 2 the implementation is as easy as it can get and possible pitfalls are already taken care of.