Performance Optimization Trade-offs
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Frontend performance is full of trade-offs. Code splitting improves initial load but adds navigation latency. Lazy loading reduces bundle size but requires loading states. Image optimization shrinks payloads but increases build complexity. Great engineers understand both the wins and the hidden costs of each decision.
You have limited resources (bytes, CPU, network, developer time). Every optimization spends some of that budget to buy user experience improvements. The best decisions maximize user happiness per unit spent.
1Code Splitting & Lazy Loading
Route-based splitting for navigation and component-based splitting for heavy features. Use dynamic import() with proper loading states and prefetching on intent.
const openModal = async () => {
const { default: Modal } = await import('./HeavyModal');
setModal(Modal);
};2Bundle Size & Tree Shaking
Prefer named imports, avoid side effects, audit dependencies. Replace heavy libraries (Moment → date-fns, Material UI → Radix + Tailwind) when possible.
3Image & Asset Optimization
Use modern formats (WebP/AVIF), explicit dimensions, lazy loading, and CDN. Reserve space to prevent CLS.
4Core Web Vitals Trade-offs
LCP favors preloading and CDNs. INP requires task chunking and off-main-thread work. CLS demands layout stability at the cost of some flexibility.
- ✓Measure real-user metrics before and after changes
- ✓Optimize for LCP first, then INP, then CLS
- ✓Lazy load heavy, non-critical features
- ✓Reserve space and use modern image formats
- ✓Tree-shake aggressively and audit dependencies
- ✓Balance performance gains with development and UX costs
- ✓Performance is a continuous process, not a one-time task