performance-optimization

npx skills add addyosmani/agent-skills --skill performance-optimization --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Performance Optimization ## Overview Measure before optimizing. Performance work without measurement is guessing — and guessing leads to premature optimization that adds complexity without improving what matters. Profile first, identify the actual bottleneck, fix it, measure again. Optimize only what measurements prove matters. ## When to Use - Performance requirements exist in the spec (load time budgets, response time SLAs) - Users or monitoring report slow behavior - Core Web Vitals scores are below thresholds - You suspect a change introduced a regression - Building features that handle large datasets or high traffic **When NOT to use:** Don't optimize before you have evidence of a problem. Premature optimization adds complexity that costs more than the performance it gains. ## Core Web Vitals Targets | Metric | Good | Needs Improvement | Poor | |--------|------|-------------------|------| | **LCP** (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s | | **INP** (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms | | **CLS** (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 | ## The Optimization Workflow ``` 1. MEASURE → Establish baseline with real data 2. IDENTIFY

Chrome DevTools → Performance tab → Record
Chrome DevTools MCP → Performance trace
import { onLCP, onINP, onCLS } from 'web-vitals';
Response time logging
Application Performance Monitoring (APM)
Database query logging with timing
Simple timing
const result = await db.query(...);
Bundle size check
npx bundlesize --config bundlesize.config.json