| name | web-performance-optimization |
| description | Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques |
| user-invocable | false |
| disable-model-invocation | true |
| updated_at | "2025-12-02T00:00:00.000Z" |
| tags | ["performance","optimization","lighthouse","core-web-vitals","frontend"] |
| progressive_disclosure | {"entry_point":{"summary":"Optimize web performance through Core Web Vitals, modern browser APIs, and framework-specific patterns for fast, responsive experiences","when_to_use":"When improving Lighthouse scores, reducing load times, implementing modern performance patterns, or debugging bottlenecks","quick_start":"1. Audit with Lighthouse 2. Apply Quick Wins (lazy loading, compression, preconnect) 3. Optimize Core Web Vitals (LCP, CLS, INP) 4. Add modern patterns (View Transitions, Speculation Rules) 5. Monitor continuously"},"references":["quick-wins.md","core-web-vitals.md","optimization-techniques.md","modern-patterns-2025.md","framework-specific.md","monitoring.md"]} |
Web Performance Optimization
Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.
When to Use This Skill
- Improving Lighthouse scores (target: 90+)
- Reducing page load times (target: <2.5s LCP)
- Optimizing Core Web Vitals for SEO rankings
- Implementing modern performance patterns (2025)
- Debugging performance bottlenecks
- Setting up continuous performance monitoring
Business Impact: 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.
Start Here: Quick Wins
High-ROI optimizations by time investment:
1 Hour Quick Wins (⭐⭐⭐⭐⭐ ROI):
- Add
loading="lazy" to below-fold images (40-60% weight reduction)
- Enable compression (gzip/brotli) (70-80% transfer size reduction)
- Add
rel="preconnect" for critical origins (100-500ms savings)
1 Day Investments (⭐⭐⭐⭐ ROI):
- Implement code splitting (30-50% bundle reduction)
- Optimize LCP image with
fetchpriority="high" (200-400ms improvement)
- Add basic service worker (instant repeat visits)
1 Week Comprehensive (⭐⭐⭐⭐⭐ ROI):
- Full caching strategy (HTTP headers + service workers)
- Bundle optimization (tree shaking, 40-60% reduction)
- Performance monitoring (Lighthouse CI + RUM)
→ See quick-wins.md for complete implementation details
Core Web Vitals at a Glance
| Metric | Target | Weight | Key Optimization |
|---|
| LCP (Largest Contentful Paint) | <2.5s | 25% | Optimize images, preload critical resources |
| INP (Interaction to Next Paint) | <200ms | 30% | Reduce JavaScript, break up long tasks |
| CLS (Cumulative Layout Shift) | <0.1 | 25% | Reserve space, optimize fonts |
| TBT (Total Blocking Time) | <200ms |
