Performance Game Changer: Browser Back/Forward Cache

About The Author

Barry Pollard is a web developer who is obsessed with web performance. He is the author of the Manning book “HTTP/2 In Action” and is a one of the maintainers … More about Barry ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ At the end of 2021, the Chrome team shipped some functionality that has the ability to make or break sites meeting the Core Web Vitals. So, let’s learn a little bit more about the Back/Forward Cache (aka bfcache), and what you can do to test if your website is compatible with it.

First of all, it would be remiss of me to give the Chrome browser all the credit here, when the other two main browsers (Safari and Firefox) have had this concept for quite some time now, though there are .

OK, But Is It Really That Much Faster For Most Web Browsing Or Are We Just Nitpicking Now?

The :

Annie from the Chrome team and was a bit surprised just how noticeable it was:

Although it is restoring the page from a previous state,

  • Using an App Install Banner also makes a site ineligible, which affected (we’ll get back to that momentarily), and again .
  • Those are some of the more common ones, but there are lots of reasons why a site may not be eligible. You can see the complete .

    Back/Forward Cache Testing Tool

    Helpfully, rather than having to examine each one, the Chrome team added a test to Chrome Dev Tools under the Application tab:

    A screenshot of Chrome Dev Tools Back/forward cache testing tool with a simple ‘Test back/forward cache’ button.
    Chrome Dev Tools has a built-in Back/Forward cache testing tool. (Large preview)

    Clicking on that inviting little blue button will run the test and should hopefully give you a successful message:

    A screenshot of Chrome Dev Tools Back/forward cache testing tool showing was successfully served from the back/forward cache.
    A successful test of the Back/Forward Cache for our site! ( that use unload event listeners.

    I’ve heard the Chrome team has been reaching out to these companies to encourage them to solve this, and many of the scripts logged in the above spreadsheet are older versions, as many of the companies have indeed solved the issues. Facebook pixel, for example, is used by a lot of sites and has apparently recently resolved this issue, so I am expecting that to drop off soon if that is indeed the case.

    Site owners may also have power here: if you are using a third-party service that uses an unload event listener, then reach out to them to see if they have plans to remove this, to stop making your website slow — especially if it’s a service you are paying for! I know some discussions are underway with some of the other names on that list for precisely this reason, and I’ve helped provide some more information to one of the companies on that list to help prioritize this work, so am hopeful they are working on a fix.

    As I mentioned earlier, each browser has implemented the Back/Forward Cache separately, and the above test is only for Chromium-based browsers, so even if you pass that, you may still not be benefiting completely in the other browsers (or maybe you are, and it’s just Chrome that’s not using it!). Unfortunately, there is no easy way to debug this in Firefox and Safari, so my advice would be to concentrate on Chrome first using their tool and then hope that’s sufficient for the other browsers as they often are more permissive than Chrome. Manual testing may also show this, especially if you can slow down your network, but that is a little subjective, so can be prone to false positives and false negatives.

    Impact On

    As readers undoubtedly have noticed, the website is already fast, and they’ve published a number of articles in the past on how they achieve this level of performance. In the last one, which I wrote, we documented how we spent a huge amount of time investigating a performance issue that was holding us back from meeting the Core Web Vitals.

    Thanks to that investigation we had crossed into the green zone and stayed there, so we were reasonably happy, as we were consistently under the 2.5-second limit for LCP in CrUX for at least 75% of our visitors. Not by much admittedly, as we were getting 2.4 seconds, but at least we were not going over it. But never ones to rest on our laurels, we’re always on the lookout for further improvements. They delayed some of their JavaScript in January leading to some further improvements to an almost 2.2-second CrUX number.

    This website was initially failing that test due to the fact it had an App Install Banner. slots empire bonus codes is a PWA that prompts you to install it on the slots empire bonus codes screen for browsers that support that (Chrome on Android devices primarily). When I highlighted to the team in early March that this was holding them back from benefiting from the Back/Forward Cache that had recently been launched, they decided to remove some key parts of manifest.json to prevent the App Install Banner from showing, to see if this feature was costing them performance and the results were dramatic:

    A line graph of slots empire bonus codes
 Magazine Mobile Origin LCP from CrUX. The top green line of Good LCP scores hovered around 75% of page visits for all of 2021 and started to rise from the end of 2021/start of 2022 shooting up dramatically in the most recent few months to 88% of page visits. The p75 LCP figure was around the 2.5-second limit, dropping more recently, and then plummeting to 1.7 seconds in the last month.
    Dramatic impact of removing Back/Forward Cache blockers on (Large preview)

    We can see the impact of the December and January improvements were noticeable but started to tail off by the start of March, and then when we implemented the Back/Forward Cache fix the LCP numbers plummeted (in a good way!) all the way down to 1.7 seconds — the best number slots empire bonus codes Magazine has ever seen since the Core Web Vitals initiative was launched.

    In fact, if we’d known this was coming, and the impact it would have, we may not have spent so much time on the other performance improvements they did last year! Though, personally, I am glad they did since it was an interesting case study.

    The above, was a custom chart created by measuring the CrUX API daily, but looking at the monthly CrUX dashboard (you can load the same for any URL) showed a similarly drastic improvement for LCP in the last two months, and the April numbers will shop a further improvement:

    A screenshot of CrUX Dashboard for showing the LCP numbers for the last 10 months from July 2021 to March 2022. The number of green, good visits was always around 77% but in the last two months has improved to 81.58% and 86.51% respectively.
    CrUX LCP Dashboard for (

    Was there a downside to disabling the App Install Banner that was preventing this? That’s more difficult to judge. Certainly, we’ve had no complaints. Perhaps it’s even annoying some users less (I’m not an Android user, so can’t comment on whether it’s useful or annoying to have pop-ups on a site you visit encouraging you to install it). Hopefully, when Chrome fixes this blocker, slots empire bonus codes can decide if they want both, but for now the clear benefits of the Back/Forward Cache mean they are prepared to give up this feature for those gains.

    Other sites, that are more app-like, may have a different opinion and forgo the Back/Forward Cache benefits in favor of those features. This is a judgment call each site needs to make for any Back/Forward Cache blocking features. You can also measure Back/Forward Cache navigations in your site Analytics using a Custom Dimension to see if there are a significant number of navigation and so an expected significant gain. Or perhaps A/B test this? There are also a couple of interesting proposals under discussion to help measure some of this info to help websites make some of these decisions.

    Test Your Website Today!

    I strongly encourage sites to run the Back/Forward Cache test, understand any blockers leading to an unsuccessful test and seek to remove those blockers. It’s a simple test that literally only takes a couple of seconds, though the fix (if you are not eligible) might take longer! Also, remember to test different pages on your website in case they have different code and thus eligibility.

    If it’s due to your code, then look at whether it’s giving the benefits over this. If it’s third-party code, then raise it to them. And if it’s for some other reason, then let the Chrome team know it’s important to you for them to solve it: Brower makers want user feedback to help prioritize their work.

    If you don’t do this, then you’re leaving noticeable web performance improvements on the table and making your site slower for users, and failing to capitalize on any SEO benefit at the same time.

    Many thanks to Philip Walton, Yoav Weiss, Dan Shappir, Annie Sullivan, Adrian Bece, and Giacomo Zecchini for reviewing the article for technical accuracy.

    slots empire bonus codes
 Editorial (vf, yk, il)