Aplikasi React dengan bundle size 5MB dan load time 15 detik — ini masalah nyata yang saya hadapi. Berikut adalah strategi optimasi yang membawa load time turun drastis ke 1 detik.
Audit Awal
Menggunakan Lighthouse dan Webpack Bundle Analyzer, saya menemukan:
- Bundle size: 5.2 MB (uncompressed)
- Largest Contentful Paint (LCP): 12.4s
- First Input Delay (FID): 350ms
- Render-blocking resources: 18 file
Strategi Optimasi
1. Code Splitting & Lazy Loading
// Before — semua component di-load sekaligus
import Dashboard from './Dashboard';
import Analytics from './Analytics';
import Settings from './Settings';
// After — lazy loading per route
const Dashboard = React.lazy(() => import('./Dashboard'));
const Analytics = React.lazy(() => import('./Analytics'));
const Settings = React.lazy(() => import('./Settings'));
2. Image Optimization
- WebP format dengan fallback
- Responsive images dengan srcset
- Lazy loading untuk below-fold images
3. Caching Strategy
- Service Worker dengan Workbox
- API response caching di IndexedDB
- Static asset hashing untuk long-term caching
4. Bundle Analysis & Tree Shaking
- Remove unused dependencies
- Replace heavy libraries dengan lighter alternatives
- Dynamic imports untuk large libraries (chart, PDF generation)
Hasil Akhir
| Metric | Before | After |
|---|---|---|
| Bundle Size | 5.2 MB | 890 KB |
| LCP | 12.4s | 1.2s |
| FID | 350ms | 45ms |
| Lighthouse Score | 35 | 94 |
Optimasi performance bukanlah sekali jadi — ini proses berkelanjutan yang harus dimonitoring terus.