Improve initial page load times

[joepio]

Although Atomic-Server feels pretty fast most of the time, the initial load has room for improvement. This is partially due to the amount of round trips:

1. Fetch the HTML, parse and render loading screen
2. Fetch the JS assets, parse and execute
3. Fetch various JSON-AD resources (including the requested page), parse and render

Include in first HTML

We could improve this by sending more data in the first HTML request:

• [ ] include essential json ad (properties, classes). This could be either in the JS bundle or on the HTML.
• [ ] Include the requested resource's json ad. This should probably be stored in the HTML.
• [ ] Include (full) js bundle

Downsides of including things in the HTML:

• the first render (of the loading screen) a bit slower. Or is HTML parsed / rendered in a streaming fashion?
• the bundle isn't cached
• more difficult to set up service worker (has to do with the caching above)

Include script to fetch in first HTML

In the first HTML response, include a script that fetches the JSON-AD for the requested resource + properties + classes. Parse the JSON, put it on window.atomic or something, and then when the JS is parsed, add the parsed files.

• Doesn't slow down initial HTML response
• Paralellizes JS + JSON-AD fetching
• One less roundtrip!

[joepio]

Properly escaping the JSON is important! A lot of bad advice can be found on the web on how to properly add JSON to your HTML. It's very easy to open up a chance for hackers to run some arbitrary code.

Perhaps we should convert to base64 or something.