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 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: Backend: Where to Start Measuring Use the symptom to decide what to measure first: 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 Heap snapshot analysis CPU spikes Synchronous heavy computation, regex backtracking CPU profiling High latency Missing caching, redundant computation, network hops Trace requests through the stack Step 3: Fix Common Anti Patterns N+1 Queries (Backend) Unbounded Data Fetching Queries That Ignore Their Index "Add an index" is the guess. The query plan is the measurement: Three things in the output decide the fix: What you see What it means Seq Scan on a large table where you expected an index No usable index for this predicate Estimated rows= off from actual by an order of magnitude Stale statistics; the planner is choosing on bad information A Sort node above the scan The index covers the filter but not the ORDER BY Index for the shape of the query , not the column in isolation. In a composite index, equality columns come first, then the range or sort column: When an index will not help: Situation Why Low selectivity, querying the dominant value (a status column that is 95% active , filtered on active ) A sequential scan is genuinely cheaper; the planner will ignore the index. Filtering on the rare value is the opposite case, and a partial index serves it well Leading wildcard ( LIKE '%term' ) A B tree cannot seek without a prefix; needs trigram or full text Function on the column ( WHERE lower(email) = ? ) The plain column index is unusable; index the expression instead Write heavy table Every index is a tax on every INSERT / UPDATE ; measure the write cost, not just the read gain Re run EXPLAIN ANALYZE after. An index that did not change the plan is a revert (Step 4), and it is not free: it still costs on every write. Connection Pool Exhaustion The signature is distinctive: every endpoint slows at once, the slow time is spent waiting for a connection rather than executing, and the database reports mostly idle sessions. Bigger is not faster. A pool larger than what the database can execute concurrently just relocates the queue from your app to the database, where it is harder to see. When instance count is unbounded (serverless, autoscaling), a proxy that multiplexes connections (pgbouncer, RDS Proxy) is the fix, not a higher max . Missing Image Optimization (Frontend) Unnecessary Re renders (React) Large Bundle Size Missing Caching (Backend) Cache what is expensive to produce and read far more often than it changes. Caching a query that was already fast adds a network hop, a staleness bug, and an eviction policy to maintain, in exchange for nothing. Pick the layer deliberately: Layer Visible to Use when Cost In process ( Map , LRU) One instance Small, hot, per instance staleness is acceptable Each instance drifts independently; invalidation reaches only one Shared (Redis, Memcached) All instances Instances must agree, or the value is expensive to recompute A network hop, and another service to run and monitor CDN / edge Everyone, per URL Responses are public and identical for a given key Invalidation is the hard part; assume you cannot recall a bad response quickly Key design decides correctness. 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, and that ships as a performance win. Choose one invalidation strategy, not three: Strategy Trade off TTL Simplest. You accept staleness up to the TTL, so state the acceptable window explicitly Event or tag based Fresh on write, but writers now have to know the cache topology Versioned keys ( user:42:profile:v7 ) Never invalidate, just stop reading old keys. Costs memory until eviction Guard against the stampede. A hot key expires, every concurrent request misses together, and the origin takes the full load at once, which is how a cache turns into an outage instead of preventing one. Serve stale while a single request recomputes ( stale while revalidate ), or coalesce concurrent misses behind one in flight promise so N waiters cause one recompute. Do not cache: anything whose staleness is a correctness bug (balances, permissions, inventory at checkout), or per user data under a key that does not identify the user. See ../../references/performance checklist.md for request coalescing, write strategies, negative caching, and the cache checklist. 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: Enforce in CI: See Also For detailed performance checklists, optimization commands, and anti pattern reference, see ../../references/performance checklist.md . Common Rationalizations Rationalization Reality "We'll optimize later" Performance debt compounds. Fix obvious anti patterns now, defer micro optimizations. "It's fast on my machine" 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

performance-optimization