Profiles and fixes frontend and backend performance: bundle size, assets, caching and Core Web Vitals. Use when a Lighthouse or CI perf check regresses, a bundle grows, or LCP, INP, CLS or TBT is too high.
Installs into .claude/skills of the current project.
Are you the author of Performance Optimization?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/monkilabs-performance-optimization)
---
name: performance-optimization
description: "Profiles and fixes frontend and backend performance: bundle size, assets, caching and Core Web Vitals. Use when a Lighthouse or CI perf check regresses, a bundle grows, or LCP, INP, CLS or TBT is too high."
---
# Performance Optimization
Measure before changing anything. Add `React.memo`/`useMemo`/`useCallback` only after a profile shows the cost — never speculatively. Set budgets (load time, memory, API latency) and enforce them in CI.
## Rules
- Node: async APIs only — never `readFileSync` or other sync I/O on a request path.
- Debounce input-driven fetches at 300 ms.
- INP replaced FID as a Core Web Vital in March 2024: budget it at ≤200 ms, and measure every interaction, not just the first.
- Profile Node with `clinic.js` or `node --inspect`; profile React with `<Profiler onRender>` or the DevTools Profiler.
## Profiling Workflow
1. Lighthouse (or the CI perf job) for a baseline; name the failing metric (LCP, CLS, TBT; INP needs field data or a Lighthouse timespan run with real interactions). Lighthouse emulates mobile by default; pass `--preset=desktop` when the regression is desktop-only.
2. Profile to locate the hotspot call stacks / long tasks.
3. Apply the minimal fix (code-split, memoize, shrink payloads, defer non-critical work); confirm in the profiler that the measured hotspot actually shrank.
4. Re-run Lighthouse / the CI perf job. Ship only at ≥10% improvement or once inside budget.
5. If the regression persists, iterate and record a rollback plan; note fixes in the changelog.
