performance-optimization
Use when analyzing performance issues, optimizing slow pages or APIs, setting up load testing (k6, Artillery), implementing caching, reducing bundle sizes, establishing performance budgets, or profiling bottlenecks. Covers frontend (Core Web Vitals, rendering, bundle size) and backend (query optimization, caching, async patterns) optimization.
Resources
1Install
npx skillscat add srstomp/pokayokay/performance-optimization Install via the SkillsCat registry.
SKILL.md
Performance Optimization
Systematic approach to identifying and fixing performance bottlenecks.
Key Principles
- Measure first — Never optimize without data; establish baseline metrics
- Identify bottleneck type — Network, CPU, memory, I/O, or rendering
- One change at a time — Apply targeted fix, re-measure, compare against baseline
- Quick wins first — Check compression, caching, indexes, N+1 queries before deep optimization
Core Web Vitals Targets
| Metric | Good | Poor |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | > 4.0s |
| INP (Interaction to Next Paint) | < 200ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | > 0.25 |
Quick Start Checklist
- Measure baseline (Lighthouse, RUM data, or APM)
- Identify bottleneck type: network, CPU, memory, I/O, or rendering
- Check quick wins: compression, caching headers, indexes, N+1 queries
- Read relevant reference for deep optimization
- Apply fix, re-measure, validate improvement
- Set performance budgets and enforce in CI
References
| Reference | Description |
|---|---|
| frontend-perf.md | Bundle analysis, rendering, Core Web Vitals |
| backend-perf.md | Query optimization, caching, async patterns |
| load-testing.md | k6, Artillery patterns, CI integration |
| profiling-guide.md | Chrome DevTools, Node profiling, flame graphs |
Categories
Install
npx skillscat add srstomp/pokayokay/performance-optimization Install via the SkillsCat registry.