[Performance] Support for fetch-then-render routing frameworks

[ryanwilsonperkin]

Overview

Currently, our @shopify/performance library makes an assumption about the way that navigation timing will work on a page. It monkeypatches the window.history.pushState and window.history.replaceState methods, as well as adding an event listener for popstate so that it can capture when history is changing and mark the current inflight navigation as complete.

This presents an issue for frameworks that can use a "fetch then render" approach such as Remix & React Router v6. In this approach, when a special Link component is clicked, the framework can determine which assets will be needed by the next route to be loaded, begin fetching those assets in the background, and only once they're available does the history change happen and the new "page" is shown. Since this means the history change happens much later, any navigation metrics returned by @shopify/performance will be inaccurate since the user's perception of how long the "navigation" took starts from the moment they clicked the link, not from the moment the assets finished downloading.

We'll need to evolve our library to have better support for capturing alternative routing approaches rather than tying to the limited history APIs.

One approach may be to expose configurable options to the Performance constructor such that we can inject an event emitter of some kind which can signal to the Performance object when a navigation has been started or created. Alternatively, we might look to using something like the Navigation API however it is missing critical support from several browsers at this time.