Optimizing for the Back/Forward Cache (bfcache)

What is bfcache?

The Back/Forward Cache (bfcache) is a browser optimization that enables instant back and forward navigation. Unlike a standard HTTP cache, which only stores the resources (HTML, JS, CSS) to avoid re-downloading them, bfcache stores a complete snapshot of the page in memory once the user navigates away.

When a user clicks "Back" or "Forward," the browser can restore the page exactly as it was, rather than reloading it from scratch. This results in:

• Instant page loads: Zero-second loading time for returning visitors.

• Improved Core Web Vitals: Significant reductions in Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).

• Higher Engagement: Users are more likely to stay on a site that feels snappy and responsive.

Source: web.dev/articles/bfcache

How to Enable bfcache Support

Most modern browsers (Chrome, Firefox, Safari) try to use bfcache automatically. However, certain technical configurations on your website can "block" a page from being eligible for caching.

To ensure your site is bfcache-compatible, follow these best practices:

1. Avoid the Cache-Control: no-store Header

The most common reason a page fails to enter the bfcache is the use of Cache-Control: no-store. This header tells the browser not to store the page in any cache, including the bfcache.

• Recommendation: If your page does not contain sensitive private data, use Cache-Control: max-age=0, must-revalidate instead of no-store. This allows the page to be cached but ensures it is checked for updates.

2. Use pagehide instead of unload events

The unload event listener is a legacy feature that prevents browsers from using bfcache.

• Recommendation: Switch to using the pagehide event. It covers the same use cases as unload but does not disqualify the page from the cache.

3. Handle Updates via the pageshow Event

Because bfcache restores a snapshot, your scripts might not run again when the user returns.

• Recommendation: Use the pageshow event to refresh any dynamic content (like refreshing an ad slot or updating a "Logged In" status). You can check the event.persisted property to see if the page was restored from bfcache.

Learn more about technical implementation: Chrome Developer Docs

Why it Matters: The Yahoo! JAPAN News Case Study

If you’re wondering if bfcache optimization is worth the effort, look at the results achieved by Yahoo! JAPAN News.

By focusing on bfcache eligibility—specifically by removing unload event listeners and ensuring proper cache headers—Yahoo! JAPAN News saw a massive improvement in user experience metrics on their mobile site:

• 9% increase in Page Views per session.

• Significant reduction in LCP for back/forward navigations.

• Higher user retention, as the "instant" feel of the back button encouraged more browsing.

Source: web.dev Case Study

How Sulvo Helps

Sulvo’s ad technology is designed to be lightweight and performance-first. Our containers are built to be compatible with bfcache, ensuring that when a user hits the "Back" button, your site remains fast and your ad revenue remains optimized.

Not sure if your site is bfcache-eligible? You can test your pages using Chrome DevTools:

1. Open DevTools and go to the Application tab.

2. Select Back/forward cache in the left menu.

3. Click Run Test to see if your page is eligible or what is currently blocking it.

For further assistance with site performance and ad optimization, please contact your Sulvo Account Manager or visit our Support Center.