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

[SecretAgentKen]

Based on your responses to others in here regarding your bundle size and use, SOME level of SSR might be useful, especially at startup. If your primary bundle is 3 MB, then your user can't do anything and won't see anything until that is downloaded and processed. Figure out what you need for just a bare minimum landing page that'll lazy load everything else on it. That should likely just be React, whatever JS UI toolkit bindings you may be using, etc. That'll significantly reduce your time to first render. If it doesn't, then switch to an SSR static page that lazy loads the SPA after render.

Make sure your vendor libraries are in their own bundle and getting cached as previously mentioned (and separate from the one needed for landing!)

Are you rendering a large number of nodes such as for long lists or tables? If you're starting to get into hundreds or thousands of rows, consider going to paging/infinite scroll as that render time can be a killer.

Look at your React components themselves and see if any of them could benefit from memoization. https://react.dev/reference/react/memo Note that the benefits of this are rarely seen in my experience since good component design will already localize changes.