Monitoring bfcache blocking reasons

Modern browsers provide an optimization feature for history navigation called the back/forward cache (bfcache). This enables an instant loading experience when users go back to a page they have already visited. Pages can be blocked from entering the bfcache or get evicted while in the bfcache for different reasons, some required by a specification and some specific to browser implementations.

To enable monitoring bfcache blocking reasons, the PerformanceNavigationTiming class includes a notRestoredReasons property. This returns a NotRestoredReasons object containing related information on the top-level frame and all <iframe>s present in the document:

• Reasons why bfcache usage was blocked.
• Details such as frame id and name, to help identify <iframe>s in the HTML.

Ongoing bfcache blocking data can be obtained using a PerformanceObserver, like this:

const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  perfEntries.forEach((navEntry) => {
    console.log(navEntry.notRestoredReasons);
  });
});

observer.observe({ type: "navigation", buffered: true });

Alternatively, you can obtain historical bfcache blocking data using a suitable method such as Performance.getEntriesByType():

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

The code snippets shown above will log NotRestoredReasons objects to the console. These objects have the following structure, which represents the blocked state of the top-level frame:

{
  "children": [],
  "id": null,
  "name": null,
  "reasons": [{ "reason": "unload-listener" }],
  "src": "",
  "url": "example.com"
}

The properties are as follows:

children Read only Experimental

An array of NotRestoredReasons objects, one for each child <iframe> embedded in the current document, which may contain reasons why the top-level frame was blocked relating to the child frames. Each object has the same structure as the parent object — this way, any number of levels of embedded <iframe>s can be represented inside the object recursively. If the frame has no children, the array will be empty; if the document is in a cross-origin <iframe>, children will return null.

id Read only Experimental

A string representing the id attribute value of the <iframe> the document is contained in (for example <iframe id="foo" src="...">). If the document is not in an <iframe> or the <iframe> has no id set, id will return null.

name Read only Experimental

A string representing the name attribute value of the <iframe> the document is contained in (for example <iframe name="bar" src="...">). If the document is not in an <iframe> or the <iframe> has no name set, name will return null.