Web Performance Optimization
Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.
Workflow
- 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.
Core Strategies
- 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.
1---2name: web-performance-optimization3description: Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.4---56# Web Performance Optimization78Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.910## Workflow11121. **Measure Current Performance**:13 - Run Lighthouse audits14 - Measure Core Web Vitals (LCP, FID, CLS)15 - Check bundle sizes and network waterfall162. **Identify Issues**:17 - Large JavaScript bundles or unoptimized images18 - Render-blocking resources19 - Layout shifts or slow server response times203. **Prioritize Optimizations**:21 - Focus on high-impact improvements (critical rendering path, image optimization, code splitting).224. **Implement Optimizations**:23 - Optimize assets, add caching headers, lazy load non-critical resources.245. **Verify Improvements**:25 - Compare before/after metrics and monitor real user metrics.2627### Core Strategies28- *Images*: Convert to WebP/AVIF, implement responsive images, specify dimensions, and use lazy loading.29- *JavaScript*: Keep bundles under 200KB. Code split and remove unused dependencies. Delay non-critical JS.30- *CSS*: Inline critical CSS, defer the rest, remove unused CSS.31- *Core Web Vitals Guide*:32 - **LCP** (< 2.5s)33 - **FID** (< 100ms)34 - **CLS** (< 0.1)3536## End-to-End Optimization (Advanced)37If coordinating optimization across the entire stack:381. **Performance Profiling & Observability**: Generate flame graphs (CPU) and heap dumps (memory) to identify hot paths. Assess distributed tracing (OpenTelemetry) and APM tool integration.392. **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.403. **Frontend & CDN/Edge**: Code split, tree shake, lazy load. Configure edge caching (CloudFlare/CloudFront), HTTP/2/3, Brotli compression, and WebP/AVIF images.414. **Mobile & PWA**: Implement service workers for offline functionality. Adaptive loading for slow networks. Virtual scrolling for long lists.425. **Load Testing & Validation**: Design realistic load scenarios using k6/Gatling to test normal, peak, and stress levels before deploying optimizations.
krishnakanthb13