Analysis of initial load time optimizations for React SPAs

Title Text

Overview

• Benchmarking SPA startup

• Code Splitting

• Server Side Rendering

• HTTP2 / HTTP-Push

• Caching

• Conclusion

Benchmarking SPA startup

• DevTools Chrome, Firefox

• Waterfall graphs
• Lighthouse (Chrome)

• Network and CPU throttle
  • 2G
  • 3G
  • 4G

Example SPA

• React
• Heavy dependencies
• Data fetching
• Multiple routes

• No Code Splitting
• No SSR
• No Caching
• No HTTP2

Example SPA

Results 3G

Code Splitting

What is Code Splitting?

Not code-splitted

Code-splitted

Code Splitting

with Webpack

• Built in JS Code-Splitting
• v3 with config
• v4 default in production
  or with config
• Vendor bundle splitting
• CSS Splitting with plugins
  • mini-css-extract-plugin
  • extract-text-webpack-plugin (v3)

Code Splitted SPA

Results 3G

Differences in initial load time

Advantages

• lazy load code only when needed
• less download time for main bundles
• big improvements for large apps
• better client caching of code splitted bundles

Drawbacks

• worse performance if latency is bigger than reduced download times
• more blocking requests (if not H2 used)
• additional points of failure (caching of bundles, etc)
• more complex (SSR)

Server Side Rendering

SSR

with Express

• Data fetching and rendering on server
• Reduced data fetching on client
• Code splitted bundle resolval on server (include js and css references or code in initial html)
• Possibility of caching

SSR + Code Splitted SPA

Results 3G

Differences in initial load time

HTTP2 / HTTP-Push

with H2O web server

H2O

https://h2o.examp1e.net
 

• High performance HTTP2 server
• Handling of HTTP2 / SSL in front of Express
• Preprioritize blocking assets
• HTTP-Push for pushing splitted bundles to client

HTTP2 + CS + SSR SPA

Results 3G

Differences in initial load time

Caching

Caching

using Varnish
 

• Serve rendered content and assets from cache
• Reduce server response time and SSR server load
• Render and update cache only if no cache hit

 SPA served from Cache

Results 3G

Differences in initial load time

Conclusion

Conclusion

• Code Splitting for large apps with H2, not small apps
• SSR with caching strongly improves time to first meaningful paint
• HTTP-Push doesn't show much improvement over blocking content reprioritization