2. 🔧 Configuration & Varnish/Fastly Setup

Proper configuration is key to unlocking the full performance benefits of the JaJuMa Back Forward Cache. This guide covers the extension's settings and provides the necessary steps for stores using Varnish or Fastly.

2.1 🔑 Accessing the Configuration Panel

You can find all settings for the extension in your Magento Admin Panel by navigating to:

Stores -> Configuration -> JaJuMa -> Back/Forward Cache

2.2 ⚙️ General Settings Explained

The extension features a streamlined set of options to control its core behavior. The table below explains what each setting does, why it is important, and our recommended configuration.

2.3 🚫 Advanced: Excluding Specific URLs

Note:
For most sites, this configuration is not needed. The extension automatically excludes URLs that are not cacheable (like the cart and checkout) from bfcache. However, if you have custom URLs that are cached by FPC but load private data via JavaScript, you can use the Blacklist configuration below to prevent them from being cached by bfcache.

2.4 ⚡ Varnish Configuration for bfcache Compatibility

If your Magento 2 store uses Varnish Cache, a specific modification to your Varnish Configuration Language (.vcl) file is required for bfcache to work correctly.

⚠️ Warning: Community Insight & Warning
You might see suggestions online (in forums, chats, or social media) to simply remove the Cache-Control: no-store header across your Magento site to enable bfcache.
Please be extremely cautious with this advice! It is NOT recommended.

While no-store does block bfcache, blindly removing it without understanding the underlying reasons it was set (often for security or data freshness on dynamic pages like cart/checkout) can lead to serious issues, including showing stale or private user data.

A robust solution requires more nuance than just removing a header. It involves carefully managing page eligibility and ensuring dynamic content is handled correctly upon restoration. Using a well-researched, tested, and proven extension designed specifically for Magento 2 is the recommended approach to avoid these pitfalls.

2.4.1 Why is this change necessary?

Varnish acts as a reverse proxy that sits in front of your web server, controlling the final HTTP headers sent to the user's browser. One of these headers, Cache-Control, tells the browser whether a page can be stored for reuse.

By default, Magento often sends headers that, when processed by Varnish, result in a Cache-Control: no-store directive. This directive explicitly forbids the browser from storing the page in any cache, including the Back/Forward Cache, effectively blocking its primary benefit.

The solution is to add logic to your VCL file that intelligently adjusts this header, allowing bfcache for public, cacheable pages while maintaining the no-store policy for sensitive pages like the cart and checkout.

2.4.2 Required VCL Modification for Varnish

You must update your default.vcl file. Locate the sub vcl_deliver subroutine and modify the set resp.http.Cache-Control line as follows:

⚠️ Warning:
Incorrectly modifying your VCL file can cause your site to become unavailable. Always test VCL changes on a staging server before deploying to production.

Find this line:

    # In sub vcl_deliver {
    set resp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";

And replace it with this logic:

    # In sub vcl_deliver {
    if (resp.http.Cache-Control ~ "public") {
        set resp.http.Cache-Control = "no-cache, must-revalidate, max-age=0";
    } else {
        set resp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";
    }

After saving the changes to your .vcl file, you must reload or restart the Varnish service for the new configuration to take effect. This change ensures that Varnish and the browser's bfcache can work together in harmony to deliver the fastest possible experience.

2.4.3 Required VCL Modification for Fastly

For Fastly CDN, you must create two custom VCL snippets through the Magento admin panel, as follows:

Step 1: Access VCL Snippets

1. Navigate to Stores > Settings > Configuration > Advanced > System
2. Expand Full Page Cache > Fastly Configuration > Custom VCL Snippets
3. Click Create Custom Snippet

Step 2: Configure Snippet 1

• Name: bfcache-preserve-public-private
• Type: fetch
• Priority: 1
• VCL Content:

 if (beresp.http.Cache-Control) {
     if (beresp.http.Cache-Control ~ "public") {
         set beresp.http.X-JaJuMa-Bfcache = "public";
     } else {
         set beresp.http.X-JaJuMa-Bfcache  = "private";
     }
 }

Save the snippet
Click Create Custom Snippet again

Step 3: Configure Snippet 2

• Name: bfcache-remove-ccns
• Type: deliver
• Priority: 100
• VCL Content:

 if (fastly.ff.visits_this_service == 0 && req.restarts == 0) {
     if (resp.http.X-JaJuMa-Bfcache == "public") {
        set resp.http.Cache-Control = "no-cache, must-revalidate, max-age=0";
     }
 }

 unset resp.http.X-JaJuMa-Bfcache;

Save the snippet

Step 4: Deploy

Click Upload VCL to Fastly, and Activate the uploaded VCL

📞 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.