← Back to Roadmap
✅ Master Level
Performance Engineering
Complete Beginner → Advanced Syllabus (Pin-to-Pin)
🟢 LEVEL 1 — Performance Fundamentals
1. What is Web Performance
- Definition & importance
- Business impact
- User experience metrics
- Performance budgets
2. Core Metrics
- Page load time
- Time to Interactive (TTI)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
🟢 LEVEL 2 — Code Splitting
3. Code Splitting Basics
- Bundle size analysis
- Route-based splitting
- Component-level splitting
- Dynamic imports
4. Webpack & Build Tools
- Webpack configuration
- Vite setup
- Tree shaking
- Analyze plugins
🟡 LEVEL 3 — Lazy Loading
5. Component Lazy Loading
- React.lazy()
- Suspense boundaries
- Fallback UI
- Error boundaries with lazy
6. Image Lazy Loading
- Intersection Observer API
- Native lazy attribute
- Progressive image loading
- Responsive images
🟡 LEVEL 4 — Rendering Strategies
7. CSR (Client-Side Rendering)
- Traditional SPA rendering
- Initial load performance
- SEO implications
- Optimization techniques
8. SSR (Server-Side Rendering)
- Server rendering fundamentals
- Hydration strategy
- Async data loading
- Static generation vs dynamic
🟠 LEVEL 5 — SSG & ISR
9. Static Site Generation
- Pre-rendering at build time
- Static export strategies
- Build optimization
- Deployment considerations
10. Incremental Static Regeneration
- ISR fundamentals
- Revalidation strategies
- On-demand rebuilding
- Cache control
🟠 LEVEL 6 — Hydration Strategies
11. Progressive Enhancement
- Server-rendered HTML
- JavaScript enhancement
- Partial hydration
- Selective hydration
12. Hydration Performance
- Hydration mismatch debugging
- Streaming HTML
- Resumability concepts
- Zero JavaScript techniques
🔵 LEVEL 7 — Bundle Optimization
13. Dependency Analysis
- Package size audit
- Tree shaking verification
- Duplicate elimination
- Critical dependencies
14. Advanced Bundling
- Module concatenation
- Scope hoisting
- Multi-entry bundling
- Chunk splitting strategies
🔵 LEVEL 8 — Advanced Metrics
15. Web Vitals
- Core Web Vitals
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- Interaction to Next Paint (INP)
16. Real User Monitoring
- Web Performance API
- Custom metrics collection
- Analytics integration
- Alerting & dashboards
🔴 LEVEL 9 — Governance & Culture
17. Performance Budgets
- Defining budgets
- Monitoring compliance
- Breaking change prevention
- CI/CD integration
18. Performance Culture
- Team awareness
- Performance education
- Tooling & automation
- Continuous improvement
⭐ Senior Frontend Focus (Must Master)
- Designing optimal rendering strategies (CSR vs SSR vs SSG vs ISR)
- Bundle size management & analysis
- Code splitting architecture
- Core Web Vitals optimization
- Performance budgeting & governance
- Real-time performance monitoring
- Leading performance-first culture