Skip to content

Improve initial page load times #511

Open
@joepio

Description

@joepio
Member

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!

Activity

joepio

joepio commented on Feb 4, 2023

@joepio
MemberAuthor

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.

Screenshot 2023-02-04 at 14 43 15

Perhaps we should convert to base64 or something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @joepio

        Issue actions

          Improve initial page load times · Issue #511 · atomicdata-dev/atomic-server