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

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 a modern, performance-focused Magento frontend like. 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 (Back/Forward Cache), which can significantly improve user experience, page load times, and Core Web Vitals Field Data Scores for Magento stores during back and forward navigation. And even more...

Bfcache stands for "back-forward cache", and it's a browser optimization feature that allows websites to cache a complete snapshot of a page in memory when a user navigates away from it. When the user returns to the page using the back or forward button, the browser can load the cached version of the rendered page instantly instead of requesting it again from the server. This results in dramatically 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 (including the JavaScript heap) in-memory.

Which allows the browser to display a page restored from bfcache without any network request and even without reading from disk! Think of it like pausing a video and instantly resuming it, rather than stopping and restarting it from the beginning. 

While bfcache is a standard browser feature, Magento 2 doesn't support it out-of-the-box. This is often due to the dynamic nature of e-commerce platforms. Certain Magento functionalities, like dynamic blocks (e.g., mini-cart updates), session management, or specific JavaScript interactions common in themes and extensions, can inadvertently prevent pages from being eligible for bfcache. Browsers are cautious and won't cache pages if there's a risk of showing stale or incorrect information, especially in sensitive areas like checkout or customer accounts. Improperly enabling bfcache without considering these dynamic elements can lead to significant issues, such as displaying outdated cart contents or even showing one user's private information to another.

Furthermore, some common web development practices, if not carefully managed, can block bfcache eligibility:

• unload Event Listeners: Using the unload JavaScript event is a primary blocker. Modern best practice recommends the pagehide event instead.
• Cache-Control: no-store Header: This header tells the browser never to cache the page, preventing bfcache. It should only be used for highly sensitive pages. For content needing freshness without being sensitive, Cache-Control: no-cache or max-age=0 are often better alternatives that don't block bfcache.
• Open Connections: Active connections like WebSockets or open IndexedDB transactions can prevent caching.
• window.opener References: Using window.opener without rel="noopener" can also block bfcache for security reasons.

Navigating these complexities requires specific adjustments to make Magento pages bfcache-compatible safely and effectively.

Implementing bfcache in a Magento store (typically via a specialized extension) can provide several significant benefits, including: 

1. Improved page load times: Instant Back/Forward Navigation! By caching pages when users navigate away, bfcache reduces the amount of time it takes for a page to load when the user returns via back/forward buttons. 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. This is especially noticeable during product discovery and comparison.
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 dramatically improves LCP (Largest Contentful Paint) times and CLS (Cumulative Layout Shift) field-data scores.
4. Reduced server load: By serving restored pages directly from the browser's memory, bfcache eliminates the need for the server to process these requests, freeing up resources.

Core Web Vitals are a set of metrics defined by Google that measure the real-world 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 instantly restoring pages and reducing page load times to near zero for back/forward navigations, bfcache significantly 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 fully rendered page, it prevents unexpected layout shifts from occurring during restoration, which dramatically improves CLS scores (often to 0 for these navigations).

Another advantage of bfcache is that it is an in-memory cache, which means it is super-fast! Faster than even the standard browser HTTP cache which often relies on disk access.

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 how often users navigate back and forth. 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...source use bfcache have a median LCP time of 1.7 seconds, compared to 2.7 seconds for websites that do not use bfcache (for bfcache-eligible navigations). 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.

Out-of-the-box Magento does not make use of bfcache.

However, by using the JaJuMa Back/Forward Cache (Bfcache) for Magento 2 extension, your Magento store will be eligible for bfcache and benefit from significantly reduced page load times during back/forward navigation, leading to better Core Web Vitals field data scores. By using bfcache, Magento stores can instantly restore the page and its resources, resulting in faster LCP times.

Similarly, the CLS metric measures how much the layout of a page shifts during loading. By restoring a page's rendered state from bfcache, Magento stores can minimize the amount of layout shift, resulting in better CLS scores. Our extension is designed to handle Magento-specific challenges, ensuring compatibility while maximizing bfcache hits.

It's important to understand that bfcache complements, rather than replaces, other caching mechanisms commonly used in Magento:

 In essence, bfcache targets a specific user action (back/forward navigation) that other caches don't fully optimize, providing a unique layer of performance enhancement.

Every Magento store should use bfcache because it dramatically improves page load times, user experience, and Core Web Vitals scores for a common navigation pattern. 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. Especially since the costs for implementing this must have improvement are very low thanks to the JaJuMa Back/Forward Cache (Bfcache) for Magento 2 extension for Magento 2 – a true "no-brainer" performance win.

Want to see if your pages are currently eligible for bfcache? You can use browser developer tools:

• Chrome DevTools: Navigate to the page, open DevTools (F12), go to Application > Cache > Back/forward cache, and click Test back/forward cache. It will report if the page was restored successfully or list reasons why it wasn't.

• Lighthouse: Starting with version 10, Lighthouse includes a bfcache audit that checks for common issues.

Implementing bfcache in a Magento store provides several significant benefits, including improved page load times for back/forward navigation, 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 and real-world data have shown that using bfcache can improve performance KPIs and user experience dramatically. The benefits of using the bfcache were not only confirmed by Google, but others even name it a "Performance Game Changer".

It's important to note that while bfcache can be a powerful optimization tool, it's not a one-size-fits-all solution without careful implementation. Depending on the website's design and functionality, native Magento setups often prevent bfcache eligibility. Furthermore, implementing it incorrectly carries risks, such as displaying stale or private user data. But with the JaJuMa Back/Forward Cache (Bfcache) for Magento 2 and possible pitfalls like handling dynamic content (e.g., MiniCart updates) and excluding sensitive pages (cart, checkout, account ) are already taken care of. Our extension is also fully compatible with Hyvä Themes.

Ready to unlock instant back/forward navigation, boost your Core Web Vitals field data, and reduce server load – safely and effectively?