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
Made with Slides.com