Measure Current Performance:
- Run Lighthouse audits
- Measure Core Web Vitals (LCP, FID, CLS)
- Check bundle sizes and network waterfall
Identify Issues:
- Large JavaScript bundles or unoptimized images
- Render-blocking resources
- Layout shifts or slow server response times
Prioritize Optimizations:
- Focus on high-impact improvements (critical rendering path, image optimization, code splitting).
Implement Optimizations:
- Optimize assets, add caching headers, lazy load non-critical resources.
Verify Improvements:
- Compare before/after metrics and monitor real user metrics.

Images: Convert to WebP/AVIF, implement responsive images, specify dimensions, and use lazy loading.
JavaScript: Keep bundles under 200KB. Code split and remove unused dependencies. Delay non-critical JS.
CSS: Inline critical CSS, defer the rest, remove unused CSS.
Core Web Vitals Guide:
- LCP (< 2.5s)
- FID (< 100ms)
- CLS (< 0.1)

End-to-End Optimization (Advanced)

If coordinating optimization across the entire stack:

Performance Profiling & Observability: Generate flame graphs (CPU) and heap dumps (memory) to identify hot paths. Assess distributed tracing (OpenTelemetry) and APM tool integration.
Database & Backend: Analyze slow query logs, create missing indexes, optimize execution plans, implement query result caching (Redis). Fix N+1 queries. Implement pagination and response compression.
Frontend & CDN/Edge: Code split, tree shake, lazy load. Configure edge caching (CloudFlare/CloudFront), HTTP/2/3, Brotli compression, and WebP/AVIF images.
Mobile & PWA: Implement service workers for offline functionality. Adaptive loading for slow networks. Virtual scrolling for long lists.
Load Testing & Validation: Design realistic load scenarios using k6/Gatling to test normal, peak, and stress levels before deploying optimizations.

web_performance_optimization