Houssein Djirdeh - Progressive React
summary
Create React App bootstraps a “hello world” at about 36 KB minified and compressed, but WebPageTest on a Moto G shows full load from ~2s to 4+ s; HTTP Archive finds median first paint ~4.7 s and TTI >20s for many React sites while median JS shipped grew from ~50 KB (2011) to ~360 KB. Concrete mitigations: profile with Chrome DevTools and React DevTools Profiler, code-split with dynamic import and React.lazy + Suspense, enable caching with workbox/service worker or pre-render routes, and explore progressive (partial) hydration and bundle-analyzer tooling.
AI-written summary · about
chapters (9)
- 0:00Start
- 3:09There's no such thing as a slow site
- 4:39what's the current state of speed?
- 7:09Profile / Analyze
- 10:04Higher level concerns
- 14:08progressive rendering
- 15:11cache things worth caching?
- 18:55extract critical styles
- 19:09pre-rendering
related talks
26mProgressive React
32mPractical Performance Tips Building Progressive Web Apps
25mDesigning High Performance React Applications
21mMaking Your React Apps Perform At Scale
26mLightning Fast React Apps
29mReact to the Need for Speed
25mThe first two seconds: Faster page loads with React
24mOptimising React’s TTI