performance-optimization

# Performance Optimization Skill ## 🔴 AI FIRST Quality Principle > **Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.** ## Purpose Expert knowledge in optimizing web performance focusing on Core Web Vitals, bundle size reduction, and efficient caching strategies. ## Core Principles 1. **Measure First** - Use Lighthouse/PageSpeed Insights 2. **Core Web Vitals** - LCP < 2.5s, FID < 100ms, CLS < 0.1 3. **Progressive Enhancement** - Core functionality works everywhere 4. **Lazy Loading** - Load content as needed 5. **Caching Strategy** - Maximize cache hits ## Enforces - Core Web Vitals targets: - LCP (Largest Contentful Paint) < 2.5s - FID (First Input Delay) < 100ms - CLS (Cumulative Layout Shift) < 0.1 - Bundle size optimization (< 100KB initial) - Image optimization (WebP, lazy loading) - HTTP caching headers - CDN optimization - Code splitting and tree shaking ## Optimization Strategies - Lazy load images and charts - Defer non-critical JavaScript - Use browser caching (Cache-Control, ETag) - Minify HTML/CSS/JavaScript - Optimize images (compression, modern formats) - Implement service workers for offline ## When to Use - Performance tuning - Bundle size reduction - Load time optimization - Core Web Vitals improvement - Caching strategy design ## References - [Web.dev Performance](https://web.dev/performance/) - [Core Web Vitals](https://web.dev/vitals/) - [Lighthouse Documentation](https://developers.google.com/web/tools/lighthouse) --- **Version**: 1.0 | **Last Updated**: 2026-02-06 | **Category**: Development & Operations