Lazy load router code to move it off the critical path to interactivity

[KyleAMathews]

The less code you load initially, the faster the page will render and become interactive (e.g. you can scroll, click on things, etc.).

Anything that isn't necessary for the initial page should be lazy loaded. One chunk of code we can move off the critical path is our router + parts of our runtime used for prefetching.

Implementing this is non-breaking and will have a significant impact on TTI (e.g. ~75-150ms)

[m-allanson]

@KyleAMathews if someone wanted to take this on, where would be a good place to start?

[KyleAMathews]

Basically go through the different parts of the runtime and figure out how to lazy load them. E.g. gatsby-link — we could lazy load the react-router Link component and simply capture clicks on links until the remainder of the code loads and then re-run the last click (if there's been any).

We could perhaps just take the existing production-app.js and change all the non-critical imports to dynamic imports. That might be enough.

Basically we need to do some R&D and identify what can be lazy loaded and then do that. This could happen incrementally as well.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[KyleAMathews]

not stale

[theiliad]

I think that this is a very essential feature. Anytime I create gatsby blog-type sites, as content grows the performance is bound to decrease. Also it's an SEO issue.

Is there a timeline or estimation of the implementation of this functionality?

Also for PRs, any direction in which you can point me in to look at this...?

[m-allanson]

This would be interesting to experiment with, but the perf savings may not be that huge. Would need good testing to ensure no breakage.