Back/Forward Cache (bfcache): The Instant Performance Booster Your Magento 2 Store Needs

“bfcache powers the rapid flow,
JaJuMa sparks the blazing glow.
Magento thrives, Hyvä flies,
Performance soaring, reaching the skies.
Pages stored, restored with grace,
No lag, no wait—a seamless pace.”

Even when using a modern, performance-focused Magento frontend like 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.

Imagine instantly snapping back to a previously viewed page without any reload delay.
That's the power of the bfcache (Back/Forward Cache), a browser feature that can dramatically improve your Magento 2 store's performance and user experience. But why isn't this powerful feature enabled by default in Magento, and how can you unlock its benefits?
As Magento performance optimization experts, JaJuMa is here to explain.

Bfcache stands for "back-forward cache", and it's a browser optimization feature that stores a complete snapshot of a webpage, including its memory state and the full JavaScript heap, when a user navigates away from it. When the user returns to the page using the back or forward button, the browser can instantly restore the page from this in-memory snapshot instead of requesting it again from the server.

Think of it like pausing a video and then resuming it – the content is immediately available exactly where you left off. Restored from bfcache without any network request and even without reading from disk! This results in near-instant page load times for back/forward navigations and a significantly smoother browsing experience for users. This is fundamentally different and faster than the standard browser HTTP cache, which only stores individual file responses (like images or CSS) and still requires the browser to reconstruct the page.

For a deeper dive into the technical workings of bfcache, the web.dev article on bfcache is an excellent resource.

Given its benefits, why isn't bfcache automatically enabled on Magento 2 stores?
The primary reason lies in the dynamic nature of e-commerce platforms and potential technical blockers that prevent browsers from safely caching pages. 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:

  
  The presence of JavaScript unload event listeners is a major blocker for bfcache in most browsers. This event is unreliable and its use is strongly discouraged; the pagehide event should be used instead. Unfortunately, legacy code or third-party modules in Magento might still use unload.

• Cache-Control: no-store Header:

  
  This HTTP header explicitly tells the browser not to store the page in any cache, including bfcache. Magento often sends this header on pages with potentially sensitive or dynamic content (like checkout or account pages) to prevent issues, but sometimes applies it too broadly.
  While Chrome is experimenting with allowing no-store pages into bfcache under specific conditions , Magento's frequent use of Set-Cookie headers in HTML responses often makes stores ineligible for this relaxation, meaning no-store remains a significant blocker in the Magento context.

• Open Connections:

  
  Active WebSocket or WebRTC connections can prevent bfcache, as can certain in-progress fetch() or XMLHttpRequest requests or open IndexedDB connections. These might be used by real-time features or certain extensions.

• window.opener References:

  
  Pages opened using target="_blank" without rel="noopener" can create a reference that blocks bfcache. Modern browsers often add noopener by default, but older code or specific implementations might still cause issues.

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

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

1. Dramatically Improved Page Load Times:
   Instant Back/Forward Navigation! Back and forward navigations become virtually instantaneous. Pages are restored from the browser's memory, eliminating network requests and server processing time for these actions. Considering that 1 in 10 navigations on desktop and 1 in 5 on mobile are back/forward actions, the cumulative time saving for users is substantial.
2. Smoother, More Fluid Browsing Experience:
   Eliminating the jarring full-page reloads during back/forward navigation creates a much more seamless and responsive feel for your store.
   This reduces user frustration, encourages exploration, and can positively impact conversion rates.
   This is especially noticeable during product discovery and comparison.
3. Boosted Core Web Vitals (CWV) scores:
   Bfcache directly improves key CWV metrics that Google uses to measure user experience and influence search rankings. We'll explore this in more detail below, but studies and real-world data suggest enabling bfcache can improve CWV field data by up to 8-10% or even more.
4. Reduced Server Load:
   Since pages restored from bfcache don't hit your server, enabling it can noticeably decrease server resource consumption, potentially lowering hosting costs and improving site stability during peak traffic.
   

Core Web Vitals (LCP, INP, CLS) are critical for SEO and user experience.
Bfcache provides a significant boost, particularly for Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS):

• Largest Contentful Paint (LCP):
  LCP measures how quickly the main content of a page becomes visible. For pages restored from bfcache, the LCP is near-zero because the page is already rendered in memory. This drastically improves the LCP score for a significant portion of page navigations.
• Cumulative Layout Shift (CLS):
  CLS measures visual stability during page load. Because bfcache restores a fully rendered snapshot, it entirely eliminates layout shifts during the restoration process. This means pages loaded from bfcache have a CLS score of 0 for that navigation, significantly improving your site's overall CLS field data. As the Chrome Developer Relations Team highlighted, bfcache's introduction led to the single biggest improvement in CLS across the web in 2022.
• Faster than HTTP Cache: It's important to reiterate that bfcache restores are faster than loading from the standard browser HTTP cache, as bfcache avoids network requests and the need to re-parse and re-render resources.

By improving LCP and CLS for a common navigation pattern, bfcache helps Magento stores achieve better CWV scores, leading to improved search rankings and a better user experience.

Overcoming Magento's inherent complexities to safely enable bfcache requires a dedicated solution. The JaJuMa Back/Forward Cache (Bfcache) for Magento 2 is expertly designed to unlock the full potential of bfcache for your store.

Our extension intelligently handles the challenges, ensuring:

• Reliable Bfcache Enablement:
  Makes your Magento 2 pages eligible for bfcache where appropriate.
• Safety First:
  Automatically excludes pages that should not be cached (like cart, checkout, customer account areas) to prevent stale data issues.
  It also includes logic to update dynamic elements like the minicart upon user interaction after a restore, balancing performance with data accuracy.
• Wide Compatibility:
  Works seamlessly with standard Magento 2, is fully compatible with Hyvä Themes, and supports Mage-OS. It also features improved Varnish compatibility.
• Handles Stale Content:
  Includes specific improvements to better manage potentially stale content when restoring from bfcache.
• Developer Friendly:
  Features a unique Debug Tool that displays bfcache status and performance KPIs directly in the frontend for logged-in admins, simplifying testing and troubleshooting – a feature not commonly found in competitor solutions.

Don't let Magento's limitations hold back your store's performance. Implement bfcache the right way with JaJuMa.

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

In essence, bfcache provides the fastest possible experience for back/forward navigation by serving a complete page directly from memory, while other caches optimize the initial loading or backend processing.
They work together to create a fast overall experience.

Check our case-studies/showcases below to see our back/forward cache extension for top LCP values in action.
A Largest Contentful Paint of 0.8s for both, a newly launched store as well as a migration from Luma to Hyvä, is impressive, isn't it?

Want to see if your pages are currently being served from bfcache?
You can easily test this using your browser's developer tools:

• Using Chrome DevTools:

  1. Open Chrome DevTools on the page you want to test (Right-click -> Inspect).
  2. Navigate to the Application tab.
  3. In the left-hand panel, scroll down to the Cache section and click on Back/forward cache.
  4. Click the Test back/forward cache button.
  5. Chrome will attempt to navigate away and back. The results panel will show whether the page was successfully restored from bfcache or list the reasons why it wasn't.

• Using Google Lighthouse:

  • Recent versions of Google Lighthouse also include an audit that checks for bfcache eligibility and identifies blockers. Running a Lighthouse report on your pages can provide valuable insights.

• Advanced Debugging:

  • For deeper analysis, developers can utilize the Back/forward cache not Restored Reasons API to programmatically determine why bfcache might be blocked.

If your tests show pages are "Not Actionable" or list specific blockers, it indicates an opportunity for optimization, potentially using the JaJuMa Bfcache Extension.

Implementing bfcache in a Magento store provides several significant & measuable 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".

Instant back/forward navigation is no longer just a 'nice-to-have' – it's a key component of a modern, high-performing e-commerce site.

While Magento's dynamic nature presents challenges to native bfcache support, these hurdles can be safely and effectively overcome.
Ignoring bfcache means leaving significant performance gains on the table.

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.

The JaJuMa Back/Forward Cache (Bfcache) for Magento 2 provides a robust, reliable, and expertly developed solution specifically for Magento 2.
It addresses the common blockers, ensures compatibility with modern setups like Hyvä and Mage-OS, and even includes a unique Debug Tool to aid developers.

Ready to provide your customers with lightning-fast navigation and boost your store's performance metrics?