/performance-audit

name: memstack-development-performance-audit
description: "Use this skill when the user says 'performance audit', 'why is it slow', 'optimize performance', 'page speed', 'Core Web Vitals', 'lighthouse', 'load time', or needs to diagnose and fix frontend or backend performance issues. Do NOT use for code reviews or security audits."
version: 1.0.0
license: "Proprietary, MemStack™ Pro by CW Affiliate Investments LLC. See LICENSE.txt"

🚀 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 reconcili