Memstack Development Performance Audit

🚀 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:  (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:  50ms blocks)
    [ ] Heavy JavaScript execution on page load
    [ ] Synchronous XHR calls blocking interaction
    [ ] Event handlers doing expensive computation

CLS (Cumulative Layout Shift) — Target: 

// 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';

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  {
  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)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cwinvestments
• Source: cwinvestments/memstack
• License: MIT
• Homepage: https://memstack.pro

Install and usage instructions live in the source repository linked above.