cwinvestments 🚀 Performance Audit: Full-Stack Performance Scanner
Identify and prioritize performance bottlenecks across frontend, backend, and network layers with measured impact and fix priority.
Activation
When this skill activates, output:
🚀 Performance Audit: Scanning for performance bottlenecks...
| Context | Status |
|---|---|
| User says "performance audit", "optimize", "slow app" | ACTIVE |
| User mentions bundle size, N+1 queries, or Core Web Vitals | ACTIVE |
| User wants to find memory leaks or unnecessary re-renders | ACTIVE |
| User wants database schema optimization specifically | DORMANT: see database-architect |
| User wants API design review (not performance) | DORMANT: see api-designer |
| User wants general code quality review | DORMANT: see code-reviewer |
Protocol
Step 1: Gather Inputs
Ask the user for:
- Stack: Frontend framework, backend language, database?
- Symptoms: What feels slow? (initial load, interactions, API responses, builds)
- Scale: How many users? How much data?
- Metrics: Any existing performance data? (Lighthouse scores, APM dashboards)
- Priority: User-facing speed or server-side efficiency?
Step 2: Frontend: Bundle Analysis
Check bundle size and composition:
# Next.js
npx @next/bundle-analyzer
# or: ANALYZE=true next build
# Webpack (generic)
npx webpack-bundle-analyzer stats.json
# Vite
npx vite-bundle-visualizer
What to look for:
| Issue | Detection | Impact | Fix |
|---|---|---|---|
| Large dependencies | Bundle > 200KB gzipped | Slow initial load | Replace with lighter alternatives |
| Duplicate packages | Same lib in multiple versions | Wasted bytes | Dedupe or pin single version |
| Unused exports | Tree-shaking not working | Wasted bytes | Use ESM imports, avoid barrel files |
| No code splitting | Single large bundle | Slow initial load | Dynamic imports, route-based splitting |
| Unoptimized images | Images > 100KB without optimization | Slow load | next/image, sharp, WebP/AVIF |
| Missing compression | No gzip/brotli on responses | 60-80% larger payloads | Enable in server/CDN config |
Common heavy dependencies and alternatives:
| Package | Size (minified) | Lighter Alternative | Size |
|---|---|---|---|
moment |
72 KB | date-fns (tree-shakeable) |
~2-5 KB used |
lodash (full) |
72 KB | lodash-es (tree-shakeable) |
~1-3 KB used |
axios |
14 KB | fetch (native) |
0 KB |
classnames |
1 KB | Template literals | 0 KB |
uuid |
3 KB | crypto.randomUUID() |
0 KB |
chart.js |
65 KB | Specific chart lib for your use case | Varies |
Tree-shaking checks:
── TREE-SHAKING ISSUES ────────────────────
[x] Barrel files (index.ts re-exporting everything)
File: src/utils/index.ts
Impact: Imports entire utils even if using one function
Fix: Import directly from source file
[x] CommonJS modules (require() instead of import)
File: src/legacy/helper.js
Impact: Cannot tree-shake CJS modules
Fix: Convert to ESM or find ESM version of dependency
[x] Side effects not declared
Package: [name]
Impact: Bundler can't safely remove unused code
Fix: Add "sideEffects": false to package.json
Step 3: Frontend: Core Web Vitals
Audit for the three Core Web Vitals:
── CORE WEB VITALS AUDIT ──────────────────
LCP (Largest Contentful Paint), Target: < 2.5s
Current: [measured or estimated]
Issues found:
[ ] Hero image not optimized (missing width/height, no lazy loading)
[ ] Render-blocking CSS in <head> (large stylesheet before content)
[ ] Web fonts blocking render (no font-display: swap)
[ ] Server response time > 600ms (TTFB too high)
[ ] Third-party scripts blocking main thread
FID / INP (Interaction to Next Paint), Target: < 200ms
Current: [measured or estimated]
Issues found:
[ ] Long tasks on main thread (> 50ms blocks)
[ ] Heavy JavaScript execution on page load
[ ] Synchronous XHR calls blocking interaction
[ ] Event handlers doing expensive computation
CLS (Cumulative Layout Shift), Target: < 0.1
Current: [measured or estimated]
Issues found:
[ ] Images without explicit dimensions (width/height)
[ ] Dynamically injected content above fold
[ ] Web fonts causing layout shift (FOUT/FOIT)
[ ] Ads or embeds without reserved space
Quick LCP fixes:
// 1. Preload hero image
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
// 2. Font display swap
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
// 3. Next.js Image component (automatic optimization)
import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} priority alt="Hero" />
Step 4: Frontend: React Performance
Unnecessary re-render detection:
| Pattern | Detection | Impact | Fix |
|---|---|---|---|
| Passing new objects/arrays as props | onClick={() => {}} in JSX |
Child re-renders every parent render | Extract handler, use useCallback |
| Missing memoization on expensive computation | Computed value in render body | Recalculated every render | useMemo for expensive calculations |
| Context causing tree-wide re-renders | Context value changes frequently | All consumers re-render | Split context, use selectors |
Missing key on list items |
React DevTools warnings | Incorrect DOM reconciliation | Add stable unique key |
| Props drilling deep component trees | Props passed through 5+ levels | Tight coupling, re-render chains | Context or composition pattern |
React performance audit checklist:
── REACT PERFORMANCE ──────────────────────
Component rendering:
[ ] React.memo on pure presentational components
[ ] useCallback for handlers passed to memoized children
[ ] useMemo for expensive computed values (> 1ms)
[ ] Stable keys on list items (not array index for dynamic lists)
State management:
[ ] State colocated to where it's used (not lifted too high)
[ ] Context split: frequent-update values separate from static config
[ ] Avoid storing derived state (compute from source of truth)
[ ] Batch state updates where possible
Data fetching:
[ ] Loading states prevent waterfall fetches
[ ] Parallel fetches where data is independent
[ ] Cache API responses (React Query, SWR)
[ ] Pagination/infinite scroll for large lists
Rendering:
[ ] Virtualize long lists (react-window, @tanstack/virtual)
[ ] Lazy load below-fold components (React.lazy + Suspense)
[ ] Avoid layout thrashing (reading DOM then writing immediately)
[ ] Debounce/throttle scroll and resize handlers
Step 5: Backend: Database Performance
N+1 query detection:
── N+1 QUERY PATTERNS ─────────────────────
Pattern: Fetching related data in a loop
Example:
const users = await db.query('SELECT * FROM users');
for (const user of users) {
user.posts = await db.query('SELECT * FROM posts WHERE user_id = ?', [user.id]);
}
Queries generated: 1 + N (where N = number of users)
Fix: JOIN or subquery
SELECT u.*, p.* FROM users u
LEFT JOIN posts p ON p.user_id = u.id;
ORM fix (Prisma):
await prisma.user.findMany({ include: { posts: true } });
ORM fix (Drizzle):
await db.query.users.findMany({ with: { posts: true } });
Missing index detection:
-- Find slow queries (PostgreSQL)
SELECT query, calls, mean_exec_time, total_exec_time
FROM pg_stat_statements
ORDER BY mean_exec_time DESC
LIMIT 20;
-- Find missing indexes
SELECT relname, seq_scan, seq_tup_read, idx_scan
FROM pg_stat_user_tables
WHERE seq_scan > 100 AND idx_scan < seq_scan / 10
ORDER BY seq_scan DESC;
-- Suggested indexes for common patterns:
-- Foreign keys: CREATE INDEX idx_posts_user_id ON posts(user_id);
-- Filtered queries: CREATE INDEX idx_users_active ON users(status) WHERE status = 'active';
-- Sorting: CREATE INDEX idx_posts_created ON posts(created_at DESC);
-- Text search: CREATE INDEX idx_users_email ON users(email);
Query optimization checklist:
| Issue | Detection | Impact | Fix |
|---|---|---|---|
| N+1 queries | Loop with DB call inside | O(N) queries → O(1) | JOIN or eager loading |
| Missing indexes | Full table scans on filtered columns | Slow queries as data grows | Add targeted indexes |
| SELECT * | Fetching all columns | Excess data transfer | Select only needed columns |
| No pagination | Returning all records | Memory + transfer overhead | LIMIT/OFFSET or cursor pagination |
| Missing connection pooling | New connection per query | Connection overhead | Use pgBouncer or built-in pool |
| Unoptimized JOINs | Joining on non-indexed columns | Slow JOINs | Index JOIN columns |
Step 6: Backend: API Performance
Over-fetching and under-fetching:
── API RESPONSE AUDIT ─────────────────────
Endpoint: GET /api/users
Response size: 45 KB per request
Fields returned: 28
Fields used by client: 8
Over-fetch ratio: 71% wasted
Fix: Add field selection
GET /api/users?fields=id,name,email,avatar
or: implement GraphQL for flexible queries
Endpoint: GET /api/dashboard
Requests made: 6 sequential API calls
Could be: 1 aggregated endpoint
Waterfall time: 1.8s
Parallel time: 0.4s (if batched)
Fix: Create /api/dashboard aggregate endpoint
or: use Promise.all() on client for parallel fetches
Missing pagination:
── PAGINATION AUDIT ───────────────────────
Endpoint: GET /api/products
Current: Returns ALL products (2,400 records)
Response size: 890 KB
Response time: 1.2s
Fix: Add cursor-based pagination
GET /api/products?cursor=abc123&limit=50
Response: { data: [...], nextCursor: "def456", hasMore: true }
Caching opportunities:
── CACHE AUDIT ────────────────────────────
Endpoint Cacheable? TTL Strategy
────────────────────────────────────────────────────────
GET /api/products Yes 5 min CDN + browser Cache-Control
GET /api/user/:id Conditional 1 min ETag / If-None-Match
GET /api/config Yes 1 hour CDN, stale-while-revalidate
POST /api/orders No, Never cache mutations
GET /api/search Maybe 30 sec Vary by query params
Missing headers:
[ ] Cache-Control not set on static assets
[ ] No ETag on API responses
[ ] No compression (gzip/brotli) on responses
Step 7: Backend: Memory & Resource Leaks
Common memory leak patterns:
| Leak Type | Detection | Symptoms | Fix |
|---|---|---|---|
| Event listeners | Listeners added without removal | Memory grows over time | removeEventListener in cleanup |
| Unclosed DB connections | Connection pool exhaustion | "too many connections" errors | Close connections in finally/cleanup |
| Growing arrays/maps | In-memory cache without eviction | RSS grows indefinitely | Add TTL, LRU cache, or size limit |
| Unreferenced timers | setInterval without clearInterval |
Timer continues after context dies | Clear timers on shutdown/cleanup |
| Unresolved promises | Promises that never settle | Memory for callbacks retained | Add timeouts to all async operations |
| Circular references | Objects referencing each other | GC can't collect (rare in V8) | Break cycles, use WeakRef |
Detection approach:
# Node.js heap snapshot
node --inspect app.js
# Open Chrome DevTools → Memory → Take heap snapshot
# Compare two snapshots to find growing objects
# Watch RSS over time
watch -n 5 'ps -o rss -p $(pgrep -f "node app.js") | tail -1'
Cleanup patterns:
// Express: cleanup on server shutdown
const server = app.listen(3000);
const connections = new Set();
server.on('connection', (conn) => {
connections.add(conn);
conn.on('close', () => connections.delete(conn));
});
process.on('SIGTERM', () => {
server.close();
for (const conn of connections) conn.destroy();
db.end(); // Close DB pool
redis.quit(); // Close Redis
clearInterval(heartbeat); // Clear timers
});
Step 8: Network Performance
Unnecessary API calls:
── REDUNDANT REQUEST AUDIT ────────────────
Issue: Same data fetched multiple times
/api/user/me called 4 times on dashboard load
Fix: Cache response, share via context/store
Issue: Polling when WebSocket would work
/api/notifications polled every 5 seconds
Fix: WebSocket/SSE for real-time updates
Issue: No request deduplication
Search input triggers API call per keystroke
Fix: Debounce (300ms), cancel previous request (AbortController)
Issue: Large uncompressed responses
/api/export returns 2.4 MB JSON without gzip
Fix: Enable compression middleware
Compression check:
// Express
const compression = require('compression');
app.use(compression());
// Verify: response should have
// Content-Encoding: gzip (or br for brotli)
CDN and static asset optimization:
── STATIC ASSET AUDIT ─────────────────────
Asset Type Current Optimized Savings
────────────────────────────────────────────────────────
Images PNG 2.4 MB WebP 180 KB 92%
Fonts 4 font files 2 subsetted 60%
CSS 3 files, 120 KB 1 file, 45 KB 62%
JS 1.2 MB bundle 4 chunks, 280 KB 77%
Recommendations:
[ ] Serve images in WebP/AVIF with fallback
[ ] Subset fonts to used characters only
[ ] Enable HTTP/2 for parallel asset loading
[ ] Set Cache-Control: max-age=31536000 for hashed assets
[ ] Use CDN for static assets (Cloudflare, CloudFront)
Step 9: Performance Scorecard
Generate a scored report:
━━━ PERFORMANCE SCORECARD ━━━━━━━━━━━━━━━━
Project: [name]
Audit date: [date]
Overall score: [X/100]
── FRONTEND ───────────────────────────────
Bundle size: [X/25] [size]KB gzipped
Issues: [list]
Core Web Vitals: [X/25]
LCP: [value]s [good/needs-work/poor]
INP: [value]ms [good/needs-work/poor]
CLS: [value] [good/needs-work/poor]
React performance: [X/10]
Re-render issues: [count]
── BACKEND ────────────────────────────────
Database: [X/15]
N+1 queries: [count found]
Missing indexes: [count found]
API efficiency: [X/10]
Over-fetching: [count endpoints]
Missing cache: [count endpoints]
No pagination: [count endpoints]
Memory safety: [X/5]
Potential leaks: [count found]
── NETWORK ────────────────────────────────
Compression: [X/5] [enabled/missing]
Asset optimization: [X/5] [optimized/unoptimized]
── PRIORITIZED FIX LIST ───────────────────
Priority Issue Impact Effort Category
──────────────────────────────────────────────────────────────────────
🔴 P1 [issue description] High Low [area]
🔴 P1 [issue description] High Medium [area]
🟡 P2 [issue description] Medium Low [area]
🟡 P2 [issue description] Medium Medium [area]
🟠 P3 [issue description] Low Low [area]
🟠 P3 [issue description] Medium High [area]
Priority scoring:
- P1 (Do now): High impact + Low-Medium effort: biggest wins
- P2 (Plan soon): Medium impact or High effort for high impact
- P3 (Backlog): Low impact or very high effort
Impact estimation guide:
| Optimization | Typical Impact |
|---|---|
| Fix N+1 queries | 50-90% reduction in query time |
| Add missing indexes | 10-100x faster queries |
| Enable compression | 60-80% smaller responses |
| Code splitting | 30-60% faster initial load |
| Image optimization | 50-90% smaller images |
| Remove unused deps | 10-40% smaller bundle |
| Add caching | 80-99% fewer API calls |
| Virtualize lists | 90% less DOM, smooth scrolling |
Inputs
- Tech stack (frontend framework, backend language, database)
- Performance symptoms (what feels slow)
- Scale information (users, data volume)
- Existing metrics (Lighthouse scores, APM data)
- Priority area (user-facing or server-side)
Outputs
- Bundle analysis with heavy dependency identification and alternatives
- Core Web Vitals audit (LCP, INP, CLS) with specific fixes
- React performance checklist (re-renders, memoization, data fetching)
- Database audit (N+1 detection, missing indexes, query optimization)
- API audit (over-fetching, pagination, caching opportunities)
- Memory leak detection patterns and cleanup
- Network audit (compression, CDN, redundant requests)
- Performance scorecard (0-100) with prioritized fix list
- Impact estimates per optimization
Level History
- Lv.1: Base: Full-stack performance scanner covering frontend (bundle analysis, Core Web Vitals, React re-renders), backend (N+1 queries, missing indexes, API over-fetching, memory leaks), and network (compression, CDN, caching). Performance scorecard with priority-ranked fix list and impact estimates. (Origin: MemStack v3.2, Mar 2026)