Performance Optimization

This is the performance optimization workflow distilled: measure first, identify the actual bottleneck, fix it, verify the improvement, then add guards against regression. The guide is opinionated about avoiding premature optimization and pairs synthetic testing (Lighthouse, DevTools) with real user monitoring. It includes Core Web Vitals thresholds, a decision tree for diagnosing what's slow (first load vs interaction vs backend), and fixes for common anti-patterns like N+1 queries, missing image optimization, and unnecessary React re-renders. The picture element example alone is worth having around. Use this when you have evidence of a performance problem, not when you're guessing one might exist someday.

Install to Claude Code

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