Back/forward cache helped Yahoo! JAPAN News increase revenue by 9% on mobile

Yuriko Hirota
Yuriko Hirota
X

Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth navigations.

web.dev article on bfcache

Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a 9% increase in ads revenue.

This case study will explain how Yahoo! JAPAN News removed the blockers for bfcache, and how bfcache drastically improved the user experience.

Removing blockers for bfcache

bfcache has been available since Chrome 86, and is also available on all modern browsers. However, taking full advantage of bfcache requires removing potential blockers on one's website. Some major blockers that Yahoo! JAPAN News faced were:

  1. Use of unload handlers.
  2. Use of the no-store directive on Cache-control headers.

You can check for major blockers on your website by going to Chrome DevTools > Applications > Back/forward Cache. Alternatively, you can use the notRestoredReasons API to get a more comprehensive view of blockers based on actual usage in the field.

Here's how Yahoo! JAPAN News removed their blockers:

CCNS is intended for pages that should never be cached, under any circumstances. This comes with the caveat that pages with CCNS don't benefit from any caching technology, including CDN edge servers and local caches.

If you have a CCNS header, this is a great opportunity to discuss what the right Cache-control strategies are for your website. Here are the main differences between no-store and no-cache.

Cache-control: no-store Cache-control: no-cache
  • The response is not allowed to be stored in caches.
  • Consequently, the response is fetched in full on every request.
  • This should be used for private responses.
  • The response is allowed to be stored in caches as long as it's revalidated with the server before each use.
  • This should be public responses you want revalidated every time (for example, the home page of a news website - though even then a very short caching time can improve performance and offload work from the main servers).

To learn more about cache-control options, review the cache-control flowchart.

A/B testing to demonstrate impact

To measure the impact of bfcache, Yahoo! JAPAN News conducted an A/B test for two weeks. They served a version of their pages with their bfcache fixes in one group and a version with pages ineligible for bfcache to another. They tested URL paths with significant traffic, to ensure the test achieved meaningful results. There were no other visual or functional difference between the pages.

Here's a video comparing the website with bfcache and without bfcache. You can see that the website with bfcache enabled loads significantly faster during a back or forward navigation.

What's really promising is that the group with bfcache enabled had a significant increase in page views and ads revenue, especially on mobile devices.

Here are details about the impact observed by Yahoo! JAPAN News with their bfcache A/B test. Further information can be found in their case study.

Metrics Uplift % (mobile) Uplift % (desktop)
bfcache hit rate +54.03 points (0.04% → 54.07%) +47.28 points (0.02% → 47.30%)
Page views +2.26% +0.65%
Ads revenue +9.0% +0.6%

When back/forward navigation between pages become instantaneous with bfcache, users tend to stay on pages longer, thus increasing ad views, leading to an increase of ad revenue.

Seamless user experience

When pages load instantly, navigations feel more seamless.

In Yahoo! JAPAN News, one of the major user journeys is reading multiple articles:

  1. Visit the article list.
  2. Click on one article to read.
  3. Once finished, return to the article list.
  4. Click on another article to read.

Before bfcache, when users finished reading an article, they had to wait for the article list page to load again. This could be a friction factor for users who want to quickly go back to the list to pick out another article to read.

Another source of friction during backward navigation was the scroll position. In practice, the browser tries to restore the scroll position when a backward navigation happens. However, because of dynamically-added ads or other layout changes, the scroll position can be incorrectly restored. This leads to user confusion or even abandoning the page.

This issue is solved when backward navigation is powered by bfcache: the scroll position is immediately and correctly restored.

Two filmstrips of a backward navigation. The top is a filmstrip is handled with bfcache, which takes 0.3 seconds, whereas the bottom is of the same process being handled without bfcache, which takes 3.3 seconds.

Now with bfcache, the friction in the user journey is gone. Users can instantly navigate back to the article list page and pick another article to read without having to wait for the article list page to load.

The same thing happens when users browse from one article directly to another and back:

An animated image showing the backward navigation flow from an article to the article listing page with and without bfcache.
With bfcache, the backward navigation is faster and the scroll position is accurately maintained. Without bfcache, these improvements aren't guaranteed.

In short, the benefits of bfcache for Yahoo! JAPAN News includes:

  • Increased pageviews: Users were more likely to navigate within the website when pages were cached with bfcache.
  • Increased revenue: As a result of increased pageviews per session, ads impression increased, which resulted in a 9% increase in revenue on mobile, as compared to the test group without bfcache.

Implement bfcache now

In short, bfcache not only makes your website instant, but can also reduce friction in overall user experience and increase engagement within your website.

The Chrome team is continually looking at bfcache blockers, especially the reasons listed as they are common reasons bfcache is not used. In the future, these may not prevent bfcache usage, but there's no need to wait until then. You can benefit from bfcache by looking at your bfcache blockers now and avoiding these common (and other less common) patterns.