Funny how we keep coming back full circle. A common optimization trick back in the day was to use pjax/turbolinks to achieve exactly this pattern. You could even go one step further and start loading on mouseover, rather than on click, giving you upwards of a one second head start.
I'm in two minds about this.
In favour: TTI and similar metrics are really important, not just for SEO but because Google and friends base these metrics off actual user behaviour: if your page takes to long to load, users will go elsewhere. Lazy-loading for features that are rarely used (and you've actually done the analytics to justify this) can be a valid trade-off.
Against: this behaviour in some form has made it even into Microsoft Word. Click the "select font" dropdown and it can freeze for a couple of seconds to create the list, especially if you have a big document open. The same, if you're unlucky, for the styles dropdown, the "insert special character" button because it insists on showing you the most-recently-used ones in a menu it has to build on click (as well as in the dialog box), and a few other places.
I expect better than this from a desktop application, especially as I remember these things being almost instant back around WinXP days. Sure it didn't come with Bing integration, but I can live without that.
And web sites and applications should aim to emulate the responsiveness that we used to have on the desktop.
Back then we used to have index.js, chat.js, checkout.js, and so on.. even your grandma’s website had free “code splitting” and “dynamic imports”!
Good advice. But really why do you need 500k extra javascript to play a video?
Please don't - too many times have I loaded a number of tabs containing medium posts before stepping on a flight with no wifi and only then discovering that images a page down are not visible.
It's fine to not load everything immediately, but load the page and then start loading all the resources, but don't wait until I scroll to the right place!
> Rather than eagerly loading the react-scroll dependency for this, they load it on interaction with the button, saving ~7KB:
My apologies for being negative but isn't it crazy it takes 7KB to scroll to the top of the page?