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 |
30% |
Code splitting, defer non-critical JS |
| FCP (First Contentful Paint) |
<1.8s |
10% |
Eliminate render-blocking resources |
→ See core-web-vitals.md for deep dive on each metric
Modern Patterns (2025)
View Transitions API - Smooth page transitions without JavaScript
@view-transition { navigation: auto; }
Speculation Rules API - Prerender pages for instant navigation
React Server Components - Zero-bundle server components
Priority Hints - fetchpriority="high" for LCP optimization
Content Visibility - CSS-based rendering optimization
→ See modern-patterns-2025.md for cutting-edge techniques
Navigation
Quick Start (Load First)
- ⚡ Quick Wins - Time-boxed optimizations (1hr/1day/1week) with ROI ratings. Load FIRST for immediate impact.
Deep Dives
- 📊 Core Web Vitals - LCP, INP, CLS optimization strategies with debugging workflows. Load when targeting specific metrics.
- 🔧 Optimization Techniques - Image, JavaScript, CSS, resource loading, caching patterns. Load when implementing specific optimizations.
Modern Features
- ✨ Modern Patterns 2025 - View Transitions, Speculation Rules, RSC, Islands Architecture. Load when adopting cutting-edge patterns.
Framework-Specific
- ⚛️ Framework Patterns - Next.js, React, Vue, Vite, Astro, SvelteKit optimizations. Load for your framework.
Measurement & Monitoring
- 📈 Monitoring - Lighthouse CI, RUM setup, performance budgets, debugging tools. Load when setting up continuous monitoring.
Key Reminders
- Measure first, optimize second - Always baseline with Lighthouse/WebPageTest before changes
- Focus on user-centric metrics - Core Web Vitals > vanity metrics
- Test on real devices - 53% of mobile users abandon after 3 seconds
- Monitor continuously - Performance degrades over time without vigilance
- Prioritize by ROI - Start with Quick Wins (high impact, low effort)
Red Flags
Stop and reconsider if:
- Optimizing without baseline measurement
- Focusing only on Lighthouse score (ignoring field data)
- Ignoring mobile performance (53% abandon rate after 3s)
- Loading all resources eagerly (no lazy loading)
- No caching strategy implemented
- Third-party scripts loaded synchronously
- Missing performance monitoring/budgets
Integration with Other Skills
- nextjs-core - Next.js Image component, font optimization, static generation
- react - Component optimization, memoization, code splitting
- vite - Build optimization, chunk splitting
- typescript-core - Type-safe performance patterns
Real-World Impact
Conversion Impact:
- Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic
- Zalando: 0.1s improvement = 0.7% revenue increase
- AutoAnything: 50% faster load = 12-13% sales increase
SEO Impact:
- Core Web Vitals are ranking factors (June 2021+)
- 75% of users passing Core Web Vitals = ranking boost
- Mobile-first indexing prioritizes mobile performance
Remember: Performance is a feature, not an afterthought. Every millisecond counts. Start with Quick Wins for immediate impact.
1---2name: web-performance-optimization-23description: Optimize web performance using Core Web Vitals, modern patterns (View Transitions, Speculation Rules), and framework-specific techniques4---5
6# Web Performance Optimization
7
8Optimize web performance through Core Web Vitals, modern browser APIs (View Transitions, Speculation Rules), and framework-specific techniques.
9
10## When to Use This Skill
11
12- Improving Lighthouse scores (target: 90+)
13- Reducing page load times (target: <2.5s LCP)
14- Optimizing Core Web Vitals for SEO rankings
15- Implementing modern performance patterns (2025)
16- Debugging performance bottlenecks
17- Setting up continuous performance monitoring
18
19**Business Impact:** 1 second delay = 7% conversion loss. 0.1s improvement = 8% increase in conversions.
20
21## Start Here: Quick Wins
22
23**High-ROI optimizations by time investment:**
24
25**1 Hour Quick Wins (⭐⭐⭐⭐⭐ ROI):**
26- Add `loading="lazy"` to below-fold images (40-60% weight reduction)
27- Enable compression (gzip/brotli) (70-80% transfer size reduction)
28- Add `rel="preconnect"` for critical origins (100-500ms savings)
29
30**1 Day Investments (⭐⭐⭐⭐ ROI):**
31- Implement code splitting (30-50% bundle reduction)
32- Optimize LCP image with `fetchpriority="high"` (200-400ms improvement)
33- Add basic service worker (instant repeat visits)
34
35**1 Week Comprehensive (⭐⭐⭐⭐⭐ ROI):**
36- Full caching strategy (HTTP headers + service workers)
37- Bundle optimization (tree shaking, 40-60% reduction)
38- Performance monitoring (Lighthouse CI + RUM)
39
40**→ See [quick-wins.md](./references/quick-wins.md) for complete implementation details**
41
42## Core Web Vitals at a Glance
43
44| Metric | Target | Weight | Key Optimization |
45|--------|--------|--------|------------------|
46| **LCP** (Largest Contentful Paint) | <2.5s | 25% | Optimize images, preload critical resources |
47| **INP** (Interaction to Next Paint) | <200ms | 30% | Reduce JavaScript, break up long tasks |
48| **CLS** (Cumulative Layout Shift) | <0.1 | 25% | Reserve space, optimize fonts |
49| **TBT** (Total Blocking Time) | <200ms | 30% | Code splitting, defer non-critical JS |
50| **FCP** (First Contentful Paint) | <1.8s | 10% | Eliminate render-blocking resources |
51
52**→ See [core-web-vitals.md](./references/core-web-vitals.md) for deep dive on each metric**
53
54## Modern Patterns (2025)
55
56**View Transitions API** - Smooth page transitions without JavaScript
57```css
58@view-transition { navigation: auto; }
59```
60
61**Speculation Rules API** - Prerender pages for instant navigation
62**React Server Components** - Zero-bundle server components
63**Priority Hints** - `fetchpriority="high"` for LCP optimization
64**Content Visibility** - CSS-based rendering optimization
65
66**→ See [modern-patterns-2025.md](./references/modern-patterns-2025.md) for cutting-edge techniques**
67
68## Navigation
69
70### Quick Start (Load First)
71- **[⚡ Quick Wins](./references/quick-wins.md)** - Time-boxed optimizations (1hr/1day/1week) with ROI ratings. Load FIRST for immediate impact.
72
73### Deep Dives
74- **[📊 Core Web Vitals](./references/core-web-vitals.md)** - LCP, INP, CLS optimization strategies with debugging workflows. Load when targeting specific metrics.
75- **[🔧 Optimization Techniques](./references/optimization-techniques.md)** - Image, JavaScript, CSS, resource loading, caching patterns. Load when implementing specific optimizations.
76
77### Modern Features
78- **[✨ Modern Patterns 2025](./references/modern-patterns-2025.md)** - View Transitions, Speculation Rules, RSC, Islands Architecture. Load when adopting cutting-edge patterns.
79
80### Framework-Specific
81- **[⚛️ Framework Patterns](./references/framework-specific.md)** - Next.js, React, Vue, Vite, Astro, SvelteKit optimizations. Load for your framework.
82
83### Measurement & Monitoring
84- **[📈 Monitoring](./references/monitoring.md)** - Lighthouse CI, RUM setup, performance budgets, debugging tools. Load when setting up continuous monitoring.
85
86## Key Reminders
87
88- **Measure first, optimize second** - Always baseline with Lighthouse/WebPageTest before changes
89- **Focus on user-centric metrics** - Core Web Vitals > vanity metrics
90- **Test on real devices** - 53% of mobile users abandon after 3 seconds
91- **Monitor continuously** - Performance degrades over time without vigilance
92- **Prioritize by ROI** - Start with Quick Wins (high impact, low effort)
93
94## Red Flags
95
96Stop and reconsider if:
97- Optimizing without baseline measurement
98- Focusing only on Lighthouse score (ignoring field data)
99- Ignoring mobile performance (53% abandon rate after 3s)
100- Loading all resources eagerly (no lazy loading)
101- No caching strategy implemented
102- Third-party scripts loaded synchronously
103- Missing performance monitoring/budgets
104
105## Integration with Other Skills
106
107- **nextjs-core** - Next.js Image component, font optimization, static generation
108- **react** - Component optimization, memoization, code splitting
109- **vite** - Build optimization, chunk splitting
110- **typescript-core** - Type-safe performance patterns
111
112## Real-World Impact
113
114**Conversion Impact:**
115- Pinterest: 40% faster perceived wait = 15% more sign-ups + 15% more SEO traffic
116- Zalando: 0.1s improvement = 0.7% revenue increase
117- AutoAnything: 50% faster load = 12-13% sales increase
118
119**SEO Impact:**
120- Core Web Vitals are ranking factors (June 2021+)
121- 75% of users passing Core Web Vitals = ranking boost
122- Mobile-first indexing prioritizes mobile performance
123
124---
125
126**Remember:** Performance is a feature, not an afterthought. Every millisecond counts. Start with Quick Wins for immediate impact.
diegosouzapw