Improve initial page load times
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.6k
- Forks
- 82
- Avg merge
- 10h 34m
- Merged PRs (30d)
- 205
Description
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:
- Fetch the HTML, parse and render loading screen
- Fetch the JS assets, parse and execute
- 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!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue does not name files, tests, or an entry point; begin by locating the initial HTML response and the code that fetches JSON-AD resources and JavaScript assets. Compare embedding data or a fetch script in the first response, and consider the listed caching and service-worker tradeoffs; done means reducing an initial round trip without losing the requested page data.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100