React Performance Investigation & Improvement

react-perf-tuning.md

Investigate

• LightHouse details report study helps in deducing many of the below mentioend improvements.
• Components profiling
• Build size analyser
• Chrome developer tools (like network requests/responses, sources for unused code, etc).

Improvements

Phase I

Improve download speed.

• Code minification & effective code splitting including tree shaking to reduce build sizes
• Static website hosting for SPA which doesn't require SSR for SEO-friendly pages to reduce latencies
• Compression implementation on server serving the files to reduce download size
• Static media files hosting on Cloud Storage behind CDN caching it which reduces build sizes furthermore.
• Images optimisation
  • Use JPEG instead of PNG having no transparency background requirement.
  • Use WebP images with fallback to JPEG to reduce overall download size.
  • Use SVG for icons to reduce overall download size.
  • Avoid inline SVG if non-critical & are re-usables.
• Remove unused codes
• Remove redundant codes by making it module for reusability

Phast II

Improve initial page load

• Preload critical assets like fonts
• Preconnet to critical servers for connection eastablishment
• Parallel processing of independent asynchronous tasks blocking page load
• Background processing of non-critical tasks blocking page load.
• Asyncrhonously load critical scripts not required for page
• Defer loading non-critical scripts after page is loaded

Phase III

Improve complete page load

• Effective caching eligible network requests on client machine.
• Fetch appropriate static media files as per client machine's screen size & resolution.
• Mounting component lifecycle code changes are re-reviewed to make sure re-mounting are not caused
• Handling side effects in suitable component lifecyle
• Stream large data otherwise memory would bloat leading the page load slowness & crash in worst case.
• Lazy load non-critical resources like media files.
• Implement pagination/infinite scrolling.
• Implement virtualize long list

Phase IV

Improve page interaction load

• Avoid component re-renders by implementing pure components & memoziation.
• Attach event listners effectively
• Write CSS animations instead of script or other animiation (like SVG) when requirements are simple
• Implementing Web Worker for intensive background tasks.