MageOS_ThemeOptimization module

This module provides theme-related features to improve the performance of your Magento store, including:

• Back/Forward Cache support for faster browser navigation
• Page transitions when navigating between pages on Magento
• Speculative preloading of internal links on hover

Requirements

• Magento 2.4.5+ or equivalent version of Adobe Commerce, Adobe Commerce Cloud, or Mage-OS

Installation details

To install the module, run the following commands in SSH, from the Magento root directory:

composer require mage-os/module-theme-optimization
php bin/magento setup:upgrade

Configuration

The module provides settings in the Magento Admin Panel under: Stores > Configuration > Advanced > System

All values can be configured at Default, Website, and Store View scopes.

Back/Forward Cache

• Enable Back/Forward Cache - Enable back/forward cache to store pages in browser memory temporarily for faster navigation. (Default: Yes)
• Update Mini Cart on User Interaction
  • Yes: Mini cart updates only after user interaction when page is restored from cache (Default)
  • No: Mini cart updates immediately on page restore
  • Recommended "Yes" to maintain optimal Page Speed and Core Web Vitals scores
• Auto Close Menu - Automatically close open menus when page is restored from back/forward cache (for compatible themes). (Default: Yes)
• Exclude URLs - Optional configuration to exclude specific URL patterns from back/forward cache. Enter URL parts (substring), one per line. The extension automatically excludes non-cacheable URLs, so this is only needed for custom cached URLs that load private data via JavaScript.

[!IMPORTANT]
bfcache availability varies based on your Full Page Cache engine and hosting. Some require additional setup.

READ MORE: Configuring Back/Forward cache with Varnish FPC

For the Back/Forward Cache feature to work with Varnish Full Page Cache, you must modify your VCL file's vcl_deliver subroutine by updating the existing Cache-Control header logic.

sub vcl_deliver {
  # Find the existing line that sets Cache-Control, like:
  set resp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";
  
  # Replace it with:
  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";
  }
}

• This modification requires manual VCL file editing and Varnish service restart
• Test thoroughly in a staging environment before deploying to production
• Consider using elgentos/magento2-varnish-extended for a more complete enhanced Varnish configuration

READ MORE: Configuring Back/Forward cache with Fastly (including Adobe Commerce Cloud)

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-MageOS-Bfcache = "public";
    } else {
        set beresp.http.X-MageOS-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-MageOS-Bfcache == "public") {
       set resp.http.Cache-Control = "no-cache, must-revalidate, max-age=0";
    }
}

unset resp.http.X-MageOS-Bfcache;

Save the snippet

Step 4: Deploy

Click Upload VCL to Fastly, and Activate the uploaded VCL

Speculative Loading

• Enable Speculation Rules - Enables speculative loading to preload pages before links are clicked, making perceived load times faster. (Default: Yes)
• Mode - Choose between prefetch and prerender modes. (Default: prefetch)
  • Prefetch: Downloads resources in advance
  • Prerender: Fully renders pages in advance (faster but may affect analytics data and UI changes)
• Eagerness Level - Controls how aggressively pages are preloaded. (Default: Moderate)
  • Conservative: Minimal preloading, only when very likely to be needed
  • Moderate: Balanced approach between performance and resource usage
  • Eager: Aggressive preloading for maximum user experience, at the cost of loading pages the user may never visit
• Exclude URL Patterns - URL patterns to never preload. One pattern per line. (Default: customer, login, logout, auth, cart, checkout, search, download, redirect, rewrite, store, productalert)
  • URL patterns are matched against the request URI. We recommend entering part or full route paths, like "customer" (to exclude all customer pages) or "customer/account/logout" (to specifically exclude logout).
• Exclude File Extensions - File extensions to never preload. (Default: pdf, zip)
• Exclude Selectors - CSS selectors for links to never preload. Enter one selector per line. (Default: .do-not-prerender)

View Transitions

• Enable View Transitions - Toggle animated page changes for storefront. (Default: Yes)
• Enable View Transitions for Admin - Enable transitions in Admin; disable if using a theme with built-in transitions. (Default: Yes)
• Apply on Back/Forward - Show transitions when using browser navigation; can be disabled for faster restores. (Default: Yes)

Contributors

Initial module, page transitions, and speculation rules contributed by @rhoerr.

Back/forward cache support was contributed by Oli Jaufmann and @JaJuMa.

Credit for the default speculation rules to David Lambauer and @run_as_root.

This module is sponsored and maintained by Mage-OS. Mage-OS makes it open source and freely available for use by any Magento 2.4+ or Adobe Commerce website.