Designing High Performance React Applications
summary
Claim: every one second faster raises conversion ~2% and ideal load is ~3–4s vs average mobile ~15s. Tools and tactics: webpack/parcel bundling and route splitting, bundle budgets ~100–170 KB, React 18 automatic batching, virtualization giving orders‑of‑magnitude wins (slides cite ~100×), server components as experimental, lazy image loading and preloads, CDN edge caching, minimize round trips, and use React Profiler to find actual re‑render hotspots.
AI-written summary · about
chapters (27)
- 0:00Intro
- 0:56why performance matters?
- 2:52Core Web Vitals
- 4:57Sooner Time To Interactivity Lesser Layout Shifts
- 5:41Bundling & Splitting
- 6:47Budget JavaScript
- 7:07Analyse JavaScript bundle size & Optimise
- 7:18Avoid Data mutation
- 7:54Immutability
- 8:09Reconciliation
- 9:37Virtualization
- 10:48React 18 - Automatic Batching
- 12:51Client Side Rendering (CSR)
- 13:50Server Side Rendering (SSR)
- 15:48React 18 - Suspense in SSR
- 17:05LYDIA HALLIE Advanced Rendering Patterns
- 17:15It depends
- 18:33Use Technologies as needed
- 18:53Limit component size
- 19:22Cache is your friend
- 20:19Image Lazy Loading
- 21:52Inline critical ; defer non-critical
- 22:10Remove unused resources
- 24:06React Profilers
- 24:18Performance Optimisation is an ongoing process
- 24:31Measure! Optimize!! Measure!!!
- 24:47Questions
related talks
34mOptimizing Performance in Large-Scale React & Node.js Applications
27mBuilding High Performance React Applications
26mLightning Fast React Apps
06mHow to React in the Slow Lane
32mPractical Performance Tips Building Progressive Web Apps
33mMaximising performance with React code-splitting techniques
51mTips and tricks for optimizing your React application
31mSpeeding up Startup for Large React Apps