Most of this post is really useful (and also hilarious), but these stand out as possibly super helpful:
So, this is what I wanted to happen:
- Start downloading the data as soon as possible (without blocking the HTML).
- Start downloading the app’s JavaScript as soon as possible (without blocking the HTML).
- When both the script and the data are downloaded, and the HTML has been parsed, run the script which will breath life into the page.
I could have done all sorts of fancy footwork in JavaScript to get this working, but I have a better solution. Well, it works, but I have a nagging feeling I’m doing something [ableist slur].
Browser experts get your magnifying glasses out…
- In the
<head>I have a<link rel="preload" … >for both the JSON and and the JS (I haveprefetchas well for browsers that don’t support preload yet)- At the end of the body I load the application JS in a regular
<script>tag.- When the JS executes, it’s does a
fetch()for the JSON file, and.then()kicks off the rendering of the React app.That looks something like this.
Once any asset is on the way down, further calls to download it won’t go out to the network. The network calls look like this:
So unless I’m wrong, I see no reason to not preload everything at the top of the page.