Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load time
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add addyosmani/agent-skills --skill performance-optimization -a cursor -y
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
name: performance-optimization
description: Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
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 → Find the actual bottleneck (not assumed)
3. FIX → Address the specific bottleneck
4. VERIFY → Measure again; keep or revert
5. GUARD → Add monitoring or tests to prevent regression
Step 1: Measure
Two complementary approaches — use both:
Synthetic (Lighthouse, DevTools Performance tab): Controlled conditions, reproducible. Best for CI regression detection and isolating specific issues.
RUM (web-vitals library, CrUX): Real user data in real conditions. Required to validate that a fix actually improved user experience.
Frontend:
// Synthetic: Lighthouse in Chrome DevTools (or CI)
// Chrome DevTools → Performance tab → Record
// Chrome DevTools MCP → Performance trace
// RUM: Web Vitals library in code
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Backend:
// Response time logging
// Application Performance Monitoring (APM)
// Database query logging with timing
// Simple timing
console.time('db-query');
const result = await db.query(...);
console.timeEnd('db-query');
Where to Start Measuring
Use the symptom to decide what to measure first:
What is slow?
├── First page load
│ ├── Large bundle? --> Measure bundle size, check code splitting
│ ├── Slow server response? --> Measure TTFB in DevTools Network waterfall
│ │ ├── DNS long? --> Add dns-prefetch / preconnect for known origins
│ │ ├── TCP/TLS long? --> Enable HTTP/2, check edge deployment, keep-alive
│ │ └── Waiting (server) long? --> Profile backend, check queries and caching
│ └── Render-blocking resources? --> Check network waterfall for CSS/JS blocking
├── Interaction feels sluggish
│ ├── UI freezes on click? --> Profile main thread, look for long tasks (>50ms)
│ ├── Form input lag? --> Check re-renders, controlled component overhead
│ └── Animation jank? --> Check layout thrashing, forced reflows
├── Page after navigation
│ ├── Data loading? --> Measure API response times, check for waterfalls
│ └── Client rendering? --> Profile component render time, check for N+1 fetches
└── Backend / API
├── Single endpoint slow? --> Profile database queries, check indexes
├── All endpoints slow? --> Check connection pool, memory, CPU
└── Intermittent slowness? --> Check for lock contention, GC pauses, external deps
Step 2: Identify the Bottleneck
Common bottlenecks by category:
Frontend:
Symptom
Likely Cause
Investigation
Slow LCP
Large images, render-blocking resources, slow server
Check network waterfall, image sizes
High CLS
Images without dimensions, late-loading content, font shifts
Check layout shift attribution
Poor INP
Heavy JavaScript on main thread, large DOM updates
Check long tasks in Performance trace
Slow initial load
Large bundle, many network requests
Check bundle size, code splitting
Backend:
Symptom
Likely Cause
Investigation
Slow API responses
N+1 queries, missing indexes, unoptimized queries
Check database query log
Memory growth
Leaked references, unbounded caches, large payloads
Fix the one thing Step 2 identified, nothing else. The anti-patterns below are the usual suspects; each entry gives the rule and the signature to recognize it, and links to a worked fix in references/optimization-patterns.md. Open the one you need when you reach that code, not before.
Backend
N+1 queries. One query per row is the most common backend bottleneck. Fetch the relation in the same query (join/include) instead of in the loop. Pattern.
Unbounded data fetching. Every list endpoint paginates with a limit and a stable order. Pattern.
Queries that ignore their index. "Add an index" is the guess; EXPLAIN ANALYZE is the measurement. A Seq Scan where you expected an index, a rows= estimate off by an order of magnitude, and a Sort node above the scan each call for a different fix; a bad rows= estimate means stale statistics, so run ANALYZE rather than adding an index. Index for the shape of the query (equality columns first, then the range or sort column). A plain index will not help a query on a low-selectivity dominant value (a partial index serves the rare value), a leading wildcard (needs trigram or full-text), or a function applied to the column (index the expression, as in WHERE lower(email) = ?), and every index taxes every write. Re-run the plan afterwards; an index that did not change it is a revert. Pattern.
Connection pool exhaustion. Signature: every endpoint slows at once, time is spent waiting for a connection rather than executing, and the database shows mostly idle sessions. One pool per process, sized so instances × max stays under the database's connection ceiling. Bigger is not faster; it relocates the queue to the database where it is harder to see. With unbounded instance counts (serverless, autoscaling), multiplex through a proxy (pgbouncer, RDS Proxy) instead of raising max. Pattern.
Missing caching. Cache what is expensive to produce and read far more often than it changes; caching an already-fast query adds a network hop and a staleness bug in exchange for nothing. Pick the layer deliberately (in-process, shared, CDN). Every input that changes the response belongs in the key (tenant, locale, permissions, feature flags): a key that omits the viewer is how one user's data gets served to another. Choose one invalidation strategy (TTL, event or tag based, versioned keys) and state the acceptable staleness window explicitly. Guard hot keys against the stampede: serve stale while one request recomputes, or coalesce concurrent misses behind a single in-flight promise. Never cache what must be fresh (balances, permissions, inventory at checkout). Pattern; request coalescing, write strategies, and negative caching in ../../references/performance-checklist.md.
Frontend
Missing image optimization. Every image declares width and height (CLS). The LCP image gets fetchpriority="high", modern formats (AVIF, WebP) through <picture>, and srcset/sizes for resolution switching; below-the-fold images get loading="lazy" and decoding="async". Pattern.
Unnecessary re-renders. An object or function created in render is a new reference every time and re-renders every child that receives it. Hoist constants; reserve React.memo and useMemo for work the profile shows is expensive, since overuse is its own cost. Pattern.
Large bundle size. Modern bundlers tree-shake ESM named imports on their own; the real gains are route-level code splitting and lazy-loading heavy, rarely-used features behind Suspense. Profile before changing import styles. Pattern.
Step 4: Verify (Keep or Revert)
A fix is a hypothesis until you re-measure. This step decides whether it survives.
Re-measure the way you measured the baseline: same command, same conditions, same fixed budget (wall-clock, sample count, or request count). A baseline taken on a cold cache against a result taken on a warm one measures the cache, not your change.
Change one thing at a time. Three optimizations landed together produce one number, and you cannot attribute it. If they must ship together, measure each in isolation first.
Beat the noise, not just the mean. Repeat the measurement and compare the delta against run-to-run variance. A 3% gain inside ±5% variance is not a gain; it is a different sample.
Then decide, strictly:
Result vs. baseline
Action
Past the threshold, tests green
Keep. Commit with the before/after numbers in the message.
Within noise (no measurable change)
Revert.
Worse
Revert.
Improved, but a test went red
Revert. A regression wearing a win's clothing.
"Neutral" is a revert, not a keep. This is the step teams skip: the change is already written, throwing it away feels wasteful, so it lands unmeasured, and the codebase accretes complexity that never bought anything. Code you keep, you maintain forever. Make it pay for itself.
Correctness gates the metric. The suite stays green and the number moves. An "optimization" that wins by dropping work the product needed (skipping a validation, caching something that must be fresh, removing an await that was load-bearing) is a regression, not a win.
Log every attempt, including the reverted ones
Reverted work leaves no trace in git history, which is exactly why the same dead idea gets tried again next quarter. Keep a short ledger so a discarded idea stays discarded:
Idea
Baseline → Result
Verdict
Why
Memoize the row component
INP 240ms → 235ms
reverted
Inside noise (±15ms). Rows weren't the bottleneck.
Virtualize the list
INP 240ms → 90ms
kept
Long tasks gone from the trace.
Preconnect to the API origin
LCP 2.8s → 2.8s
reverted
Already same-origin.
A section in the PR description or a PERF.md in the repo both work. What matters is that the next person (or the next agent) reads it before proposing an experiment, and doesn't re-run one that already failed.
Step 5: Guard Against Regression
Guard the metric the user actually feels, not every available number. Use the
same LCP, INP, p95 latency, or other primary metric that justified the fix.
Use two complementary layers when the surface is user-facing:
Synthetic CI gate: Catch reproducible regressions before merge with a
performance budget. Repeat noisy measurements or compare a median/trend so
normal run-to-run variance does not turn the gate into a flaky check.
Field monitoring: Alert on a meaningful p75 movement in RUM data. Use
attributed web-vitals data to locate the cause; treat CrUX's rolling window
as confirmation rather than an immediate alert.
When either guard fires, return to Step 1 and establish a fresh baseline before
proposing another fix.
Set budgets and enforce them:
JavaScript bundle: < 200KB gzipped (initial load)
CSS: < 50KB gzipped
Images: < 200KB per image (above the fold)
Fonts: < 100KB total
API response time: < 200ms (p95)
Time to Interactive: < 3.5s on 4G
Lighthouse Performance score: ≥ 90
Your machine isn't the user's. Profile on representative hardware and networks.
"This optimization is obvious"
If you didn't measure, you don't know. Profile first.
"Users won't notice 100ms"
Research shows 100ms delays impact conversion rates. Users notice more than you think.
"The framework handles performance"
Frameworks prevent some issues but can't fix N+1 queries or oversized bundles.
"The query is slow, add an index"
Read the plan first. The index may already exist and be unusable, and every index taxes writes forever.
"Just cache it"
Caching an already-cheap call buys nothing and adds a staleness bug. Cache what is expensive and re-read far more than written.
"Raise the pool size, we're running out of connections"
A pool bigger than the database can serve moves the queue somewhere less visible. Find what holds connections.
"It didn't help much, but it doesn't hurt"
Neutral changes are a revert. You pay maintenance on them forever and got nothing back.
"We already wrote it, may as well keep it"
Sunk cost. The measurement doesn't care how long the change took to write.
"The improvement is obvious, no need to re-measure"
Then re-measuring is cheap and proves it. Unmeasured wins are how neutral complexity lands.
Red Flags
Optimization without profiling data to justify it
N+1 query patterns in data fetching
An index added without a query plan before and after to justify it
A cache key that omits an input the response depends on (tenant, locale, viewer)
A cache with no stated staleness window and no invalidation strategy
Connection pool size raised in response to exhaustion, without finding what holds connections
List endpoints without pagination
Images without dimensions, lazy loading, or responsive sizes
Bundle size growing without review
No performance monitoring in production
React.memo and useMemo everywhere (overusing is as bad as underusing)
Optimizations kept without a re-measurement that justifies them
Several optimizations bundled into one measurement, so no single change can be attributed
A "win" that required a test to be changed, skipped, or deleted
The same failed optimization attempted more than once because nobody recorded the first attempt
Verification
After any performance-related change:
Before and after measurements exist (specific numbers)
The result was re-measured the same way as the baseline (same command, same conditions)
The improvement exceeds run-to-run variance, not just the mean
Changes that didn't beat the baseline were reverted, not kept as neutral
Attempts are logged, kept and reverted alike, so a dead idea isn't re-run
The specific bottleneck is identified and addressed
Core Web Vitals are within "Good" thresholds
Bundle size hasn't increased significantly
No N+1 queries in new data fetching code
Any new index is justified by a query plan before and after, and its write cost was considered
Any new cache states what it keys on and how it goes stale
The measured user-facing metric has a synthetic budget or field monitor that can detect regression
Existing tests still pass (optimization didn't break behavior)
How do I install performance-optimization?
Download skills/performance-optimization/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does performance-optimization live?
The publisher keeps it at https://github.com/addyosmani/agent-skills.
Which agents can use performance-optimization?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.