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

undefined

**Set a target:**

- First Contentful Paint: < 1.8s
- Time to Interactive: < 3.8s
- API response: < 200ms (p95)
- Animation: 60fps consistently

**Output:** Baseline metrics and target goals defined

---

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

undefined

**Common Bottlenecks:**

| Area         | Common Issues                                         |
| ------------ | ----------------------------------------------------- |
| **Frontend** | Unoptimized images, blocking JS, large bundles        |
| **Database** | Missing indexes, N+1 queries, full table scans        |
| **API**      | Synchronous blocking, no caching, heavy computation   |
| **Network**  | Too many requests, no compression, large payloads     |
| **Memory**   | Leaks from unsubscribed listeners, retained DOM nodes |

**Output:** Specific bottleneck identified with evidence

---

<!-- 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 -->

undefined

**If verification fails:** The fox moved too fast and broke something. Read the diagnostics, fix the regression, re-run verification. Speed without correctness is worthless.

**Once CI passes**, measure the improvement:

**Before/After Comparison:**

**Profile again:**

```bash

**Output:** Documented gains with verification

---

undefined

**Preventive Measures:**

```bash

**Output:** Report delivered, monitoring in place

---

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

undefined

**The 80/20 Rule:**
80% of performance problems come from:

1. Unoptimized images
2. Missing database indexes
3. No caching
4. Too much JavaScript upfront

Check these first before diving deeper.

---

_The swift fox leaves the slow forest behind._ 🦊