3. 🔎 Testing, FAQ & Troubleshooting

After configuring the JaJuMa Back Forward Cache, it's crucial to verify that it's working and to understand how to address common issues. This guide provides testing steps, answers to frequently asked questions, and troubleshooting advice.

3.1 🔎 How to Test if bfcache is Working

The most reliable way to check if a page is being served from the bfcache is by using the developer tools built into modern browsers like Google Chrome.

Follow these steps:

1. In Chrome, navigate to a cacheable page on your store (e.g., a category or product page).
2. Open Chrome DevTools by right-clicking on the page and selecting "Inspect" or by pressing F12.
3. In the DevTools panel, go to the Application tab.
4. In the left-hand menu, scroll down to the "Background Services" section and click on Back/forward Cache.
5. Click the blue Test back/forward cache button.
6. Chrome will automatically navigate away from and back to your page to simulate a user's back/forward navigation.

After the test, you will see a result. A "Successfully served from back/forward cache" status confirms that the extension is working correctly for that page.

If the test fails, DevTools will provide a reason under "Not Restored Reasons," which can help you diagnose the problem.

3.2 🔎 Using the Built-in Debug Tool

As a convenient alternative to browser developer tools, the extension includes its own diagnostic tool for logged-in administrators.

You can activate this feature by setting Enable Debug Mode to 'Yes' in the extension's configuration. Once enabled, a small overlay will appear at the bottom of your screen in the frontend. This tool provides an at-a-glance confirmation of whether the page was restored from bfcache and displays key performance metrics such as CLS, LCP, INP, and TTFB for the current page view.

It's a powerful way to verify the extension's functionality directly on the frontend during development or testing.

3.3 ❔ Frequently Asked Questions (FAQ)

3.3.1 What is the difference between bfcache and Varnish or Magento's FPC?

While all are caching mechanisms, they serve different purposes. Varnish and Magento's Full Page Cache (FPC) are server-side caches that speed up the initial page load by delivering a pre-built HTML page. Bfcache is a browser-side, in-memory cache that makes navigations using the back and forward buttons instantaneous by restoring a complete snapshot of the page, which is even faster than Varnish/FPC. They work together to create a comprehensive performance strategy.

3.3.2 Why is bfcache disabled in Magento by default?

Magento disables bfcache by default to prevent issues with stale or outdated content, especially on dynamic pages. For example, if a user adds an item to the cart and navigates back, a cached page might show an incorrect cart total. Our extension solves this by intelligently re-enabling bfcache while automatically excluding sensitive pages and providing smart updates for dynamic elements like the minicart.

3.3.3 How does the extension handle dynamic content like the minicart?

The extension is configured by default to update the minicart only after a user interacts with the page (e.g., hovers over the cart icon). This approach provides the best of both worlds: the page restores instantly from bfcache (protecting your CWV scores), and the minicart data is refreshed before the user completes their next action, ensuring accuracy without compromising performance.

3.3.4 Which pages are automatically excluded from bfcache?

To ensure data integrity and a smooth user experience, the extension automatically prevents bfcache on pages that should always be dynamic. This includes the Shopping Cart, Checkout, and all Customer Account pages.

3.3.5 Is this extension compatible with Hyvä Themes?

Yes, the JaJuMa Back/Forward Cache extension is fully compatible with Hyvä Themes and Mage-OS right out of the box. No special compatibility module is required.

3.4 🔧 Troubleshooting Common Issues

When a bfcache test fails, the browser's developer tools will often provide a "Not Restored Reason". These reasons typically point to one of the following common culprits:

• unload Event Listeners:
  This is the most common blocker. The unload JavaScript event is deprecated and prevents bfcache. Many older third-party scripts (for analytics, ads, or tracking) still use it.
• Restrictive Cache-Control Headers:
  As detailed in the configuration guide, a Cache-Control: no-store header sent to the browser will prevent bfcache. If you use Varnish, ensure your VCL is configured correctly.
• Open Connections:
  Active connections like WebSockets or unclosed fetch() requests can prevent a page from being frozen and stored in the cache.
• Problematic <iframe> Elements:
  Cross-origin iframes from third-party services can sometimes block the parent page from being cached.

💡 Pro Tip:
To identify if a third-party script is the culprit, try temporarily disabling scripts via your tag manager or browser extensions and re-running the bfcache test. If the test passes, you can re-enable scripts one by one to isolate the source of the issue.

3.5 💡 Best Practices for Maintaining bfcache Compatibility

To ensure your store remains bfcache-friendly over the long term, follow these best practices:

• Avoid unload:
  Instruct your developers to always use the pagehide event instead of unload for any cleanup tasks or analytics beacons that need to fire when a user navigates away.
• Audit Third-Party Scripts:
  When adding new marketing tags, analytics tools, or other third-party JavaScript, check their documentation or test them to ensure they do not block bfcache.
• Handle Dynamic Content on Restore:
  If you have content that might become stale (e.g., stock status, personalized greetings), you can use the pageshow event in JavaScript. This event fires every time a page is loaded, including from bfcache. You can check its persisted property to see if the page was restored from bfcache and then trigger a lightweight AJAX request to update only the dynamic parts of the page.

        window.addEventListener('pageshow', (event) => {
          if (event.persisted) {
            // This page was restored from bfcache
            // Refresh dynamic content here
            console.log('Page was restored from bfcache.');
          }
        });

By following these guidelines, you can ensure your Magento 2 store consistently delivers the instant, seamless navigation experience that modern users expect.

📞 Need Help?

Still have questions or need help with your configuration? Our expert team is here to assist. Please don't hesitate to contact our support team for personalized assistance.