Mastering React Performance: From 3s to 300ms Load Times
Real-world techniques for optimizing React applications - code splitting, lazy loading, memoization, and more.
Performance is a feature. A 100ms delay in load time can reduce conversions by 7%. Here's how I optimized a React application from 3 seconds to under 300ms load time.
Measuring First
Before optimizing, measure. Use:
- **Lighthouse**: Overall performance score
- **React DevTools Profiler**: Component render times
- **Web Vitals**: Core metrics (LCP, FID, CLS)
Code Splitting
The biggest win came from code splitting. Instead of loading the entire app upfront, split by routes and load components lazily.
Use React.lazy and Suspense to load components only when needed. This reduced our initial bundle from 2MB to 400KB.
Memoization
Prevent unnecessary re-renders with React.memo, useMemo, and useCallback. But don't over-optimize - memoization has its own cost. Profile first, then optimize.
Image Optimization
Images are often the largest assets. Optimize with:
- **Next.js Image**: Automatic optimization and lazy loading
- **WebP format**: 30% smaller than JPEG
- **Responsive images**: Serve appropriately sized images
Virtualization
For long lists, render only visible items. Libraries like react-virtual or react-window handle this efficiently.
Server-Side Rendering
Moving to Next.js with SSR improved our Time to First Byte significantly. Users see content faster, and SEO improved dramatically.
Results
After optimization: - Initial load: 3s → 280ms - Lighthouse score: 45 → 94 - Bounce rate: -35% - User engagement: +28%
Performance optimization is an ongoing process. Set up monitoring and address regressions early.
David Sampson
Senior Full Stack Engineer