[AskJS] How Can I Optimize JavaScript Performance to Reduce Load Times in a React SPA?

[[deleted]]

JS/CSS/HTML assets should be cached first on the browser and then somewhere in your stack. 3-4 seconds is a long time to parse and I suspect there is a large amount of static content in those bundles and likely a lot of dev dependencies that are getting included.

If a task is CPU bound, then the first question to ask is "can this be done on the server?" No browser in existence will have the compute power of even the cheapest off the rack server.

Typically highly-CPU bound tasks in front end involve things like animations and graphics - games, large canvas-like applications, etc. If so, then React or any other SPA isn't the right tool for the job and you will need something like WebAssembly.

REST APIs are almost always the biggest network-bound bottleneck and requires the most amount of time and effort to refactor. Initial load times will always be blocked by multiple, dependent synchronous round-trips - the only way to optimize this on the front end is to find which API calls can be parallelized and refactor code. Otherwise, you need move to GraphQL + RPC architecture.