STALK → PINPOINT → STREAMLINE → CATCH → CELEBRATE
   ↓         ↲           ↲           ↓          ↓
Watch for  Find the    Optimize   Capture   Enjoy the
Slowness   Bottleneck  Hot Paths  Gains     Win

# Web vitals
npm install -g lighthouse
lighthouse https://yoursite.com --output=json

# Bundle analysis
npm run build
npm run analyze

# Database query times
# Check your ORM's query logging

// Chrome DevTools Performance tab
// Look for:
// - Long tasks (>50ms)
// - Layout thrashing (forced reflows)
// - Memory leaks (growing heap)

// Lighthouse report flags:
// - Unused JavaScript
// - Render-blocking resources
// - Unoptimized images
// - Third-party scripts

-- Find slow queries (SQLite example)
-- Enable query logging in your ORM

-- Check for missing indexes
EXPLAIN QUERY PLAN
SELECT * FROM posts WHERE tenant_id = 'x' AND status = 'published';
-- Look for "SCAN" instead of "SEARCH" - needs index

-- Add index
CREATE INDEX idx_posts_tenant_status ON posts(tenant_id, status);

# Visualize what's in your bundle
npm install --save-dev rollup-plugin-visualizer

# Add to vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
  visualizer({ open: true })
]

# Look for:
# - Large dependencies (can you tree-shake?)
# - Duplicate code
# - Unnecessary polyfills

<!-- Use proper formats and sizes -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy" decoding="async">
</picture>

<!-- Or use a component -->
<OptimizedImage
  src="photo.jpg"
  alt="Description"
  widths={[400, 800, 1200]}
  sizes="(max-width: 800px) 100vw, 800px"
/>

// Before: Everything in main bundle
import HeavyChart from './HeavyChart.svelte';

// After: Lazy load
const HeavyChart = lazy(() => import('./HeavyChart.svelte'));

// Or in SvelteKit
{#await import('./HeavyChart.svelte') then { default: HeavyChart }}
  <HeavyChart data={chartData} />
{/await}

// Before: N+1 query problem
const posts = await db.query.posts.findMany();
for (const post of posts) {
  post.author = await db.query.users.findFirst({
    where: eq(users.id, post.authorId),
  });
}

// After: Single query with join
const postsWithAuthors = await db.query.posts.findMany({
  with: {
    author: true,
  },
});

// API route caching
export const GET: RequestHandler = async ({ platform }) => {
  const cache = platform?.env?.CACHE;
  const cacheKey = "popular-posts";

  // Check cache first
  let data = await cache?.get(cacheKey);
  if (data) {
    return json(JSON.parse(data));
  }

  // Fetch fresh
  data = await fetchPopularPosts();

  // Cache for 5 minutes
  await cache?.put(cacheKey, JSON.stringify(data), { expirationTtl: 300 });

  return json(data);
};

<script>
  import { memoize } from '$lib/utils/memoize';

  // Expensive computation
  const calculateStats = memoize((data) => {
    return data.reduce(/* complex logic */);
  });

  // Only recalculates when data changes
  $: stats = calculateStats($dataStore);
</script>

<!-- For long lists -->
<VirtualList items={largeArray} let:item>
  <ListItem {item} />
</VirtualList>

<!-- Only renders visible items -->

# Sync dependencies
pnpm install

# Verify ONLY the packages the fox touched — lint, check, test, build
gw ci --affected --fail-fast --diagnose

Metric          Before    After    Improvement
─────────────────────────────────────────────
FCP             2.4s      1.1s     54% faster
Bundle size     340kb     180kb    47% smaller
Query time      450ms     85ms     81% faster
Memory usage    180MB     95MB     47% less

# Re-run Lighthouse
lighthouse https://yoursite.com

# Check new bundle
npm run build && npm run analyze

## 🦊 FOX OPTIMIZATION COMPLETE

### Target

Home page load time

### Bottleneck Found

Unoptimized hero image (2.1MB PNG) + blocking JS

### Optimizations Applied

- Converted hero to AVIF/WebP with srcset
- Lazy loaded below-fold images
- Split chart component (saves 120kb initial bundle)
- Added Cloudflare caching headers

### Results

| Metric | Before | After | Change |
| ------ | ------ | ----- | ------ |
| FCP    | 2.4s   | 1.1s  | -54%   |
| LCP    | 3.8s   | 1.9s  | -50%   |
| Bundle | 340kb  | 180kb | -47%   |

### Monitoring

- Lighthouse CI added to PR checks
- Real User Monitoring (RUM) enabled
- Alert threshold: FCP > 2s

# Add to CI
- name: Performance Budget
  run: |
    npm run build
    npx bundlesize

# Set budgets in package.json
{
  "bundlesize": [
    { "path": "./build/*.js", "maxSize": "150kb" }
  ]
}

Is it slow on first load?
├── YES → Check bundle size
│   ├── Bundle > 200kb? → Code split, tree shake
│   ├── Images > 500kb each? → Compress, lazy load
│   └── Many HTTP requests? → Combine, preload critical
│
└── NO → Slow during use?
    ├── Slow API responses?
    │   ├── Check query times → Add indexes, reduce N+1
    │   ├── Check external calls → Cache, parallelize
    │   └── Check computation → Move to worker, memoize
    │
    ├── Janky scrolling/animations?
    │   ├── DevTools shows repaints? → Use transform/opacity only
    │   ├── Long frames (>16ms)? → Reduce work per frame
    │   └── Memory climbing? → Check for leaks
    │
    └── Slow interactions?
        ├── Click delay? → Check event handlers
        ├── Input lag? → Debounce, throttle
        └── Form submit slow? → Check validation, API

# Bundle analysis
npm run build && du -sh build/

# Network waterfall
# Chrome DevTools → Network tab → Slow 3G preset

# Performance profile
# Chrome DevTools → Performance → Record page load

# Memory snapshot
# Chrome DevTools → Memory → Take heap snapshot