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 copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 75.2K
GitHub stars: 114.6K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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