Lab 08 · Loop-Closed Web Performance Repair

Ines owns web performance at an e-commerce company where "it feels faster" has been accepted as a deploy justification for years. Her rule now: no performance PR merges without a trace showing the metric moved. AI makes this rule easy to follow and easy to fake — an assistant will happily explain why your change should improve LCP without ever measuring anything. This lab closes the loop: the agent records real traces in a real browser via chrome-devtools-mcp, you triage the insights, and the pass condition is measured deltas, not narrative.

Time & tier

~120 minutes hands-on · Verify stage (maps to module M6, playbooks PB-34/PB-37) · $0 — Chrome, chrome-devtools-mcp, Claude Code or any MCP-capable agent, Lighthouse as cross-check.

Setup

npm create vite@latest perf-lab -- --template react-ts
cd perf-lab && npm install
npm install moment lodash   # yes, both. That's part of the point.
mkdir -p public
# Hero image: grab any ~2000px-wide photo and save it UNRESIZED:
#   curl -L -o public/hero.jpg "https://picsum.photos/2400/1200"

src/App.tsx — the seeded storefront. Copy verbatim:

import { useState } from "react";
import moment from "moment";
import _ from "lodash";

const PRODUCTS = Array.from({ length: 8000 }, (_, i) => ({
  id: i,
  name: `Product ${i} ${Math.random().toString(36).slice(2, 8)}`,
  price: Math.round(Math.random() * 900) + 100,
}));

function score(name: string, q: string) {
  // naive fuzzy score, deliberately expensive
  let s = 0;
  for (let i = 0; i < name.length; i++)
    for (let j = 0; j < q.length; j++)
      if (name[i].toLowerCase() === q[j].toLowerCase()) s += 1;
  return s;
}

export default function App() {
  const [q, setQ] = useState("");
  const results = q
    ? _.orderBy(PRODUCTS.map((p) => ({ ...p, s: score(p.name, q) })), "s", "desc").slice(0, 20)
    : PRODUCTS.slice(0, 20);

  return (
    <main style={{ maxWidth: 960, margin: "0 auto", fontFamily: "system-ui" }}>
      <img src="/hero.jpg" style={{ width: "100%" }} alt="Season sale" />
      <h1>Spring sale — ends {moment().add(3, "days").format("dddd, MMMM Do")}</h1>
      <input
        aria-label="Search products"
        placeholder="Search 8,000 products…"
        value={q}
        onChange={(e) => setQ(e.target.value)}
      />
      <ul>
        {results.map((p) => (
          <li key={p.id}>{p.name} — ${p.price}</li>
        ))}
      </ul>
    </main>
  );
}

Wire the MCP server, .mcp.json:

{
  "mcpServers": {
    "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] }
  }
}

The evidence ledger, perf-log.md:

| Metric | Before | After fix 1 | After fix 2 | After fix 3 | Target |
|--------|--------|-------------|-------------|-------------|--------|
| LCP    |        |             |             |             | < 2.5s |
| INP (search keystroke) | |    |             |             | < 200ms|
| CLS    |        |             |             |             | < 0.1  |
| JS transferred on load | |    |             |             | -30%   |
Each cell must cite the trace it came from. No trace, no cell.

Guided steps

1. 1Build and serve production.npm run build && npm run preview. Performance work happens against the production build — dev-mode traces lie. Expected: preview on port 4173.
2. 2Record the baseline trace through the agent. Prompt: "Using chrome-devtools-mcp: open http://localhost:4173, emulate Slow 4G and 4x CPU throttling, record a performance trace of a page load, and report the LCP value, the LCP element, layout shifts with their culprits, and the largest network transfers." Expected: the agent returns concrete numbers and names hero.jpg as the LCP resource. Fill the Before column. Cross-check once with Lighthouse (npx lighthouse http://localhost:4173 --preset=perf) so you trust the instrument.
3. 3Trace the interaction too. "In the same session, type 'pro' into the search box one character at a time and record a trace. Report the longest interaction duration, and where the time went (script vs render)." Expected: a long task in the hundreds of milliseconds attributed to the input handler. Record it. You now have the full Before row — and a ranked list of suspects.
4. 4Triage before touching code. Ask the agent to rank the three biggest problems by expected user impact, then write your own ranking in perf-log.md with one sentence of mechanism each. If the agent's insight blames something you can't verify in the trace ("consider memoizing App"), mark it unverified and drop it — insights you can't see in the trace are hypotheses, not findings.
5. 5Fix 1 — the LCP resource. The hero ships as a multi-megabyte original JPEG, unsized. Fix: resize/compress to display width (e.g., npx sharp-cli -i public/hero.jpg -o public/hero-1280.webp resize 1280 or any image tool), serve the WebP, and add explicit width/height attributes (this also addresses the layout shift the baseline trace attributed to the unsized image). Rebuild, re-trace exactly as in step 2, fill the After-fix-1 column. Expected: LCP drops by seconds; CLS toward ~0.
6. 6Fix 2 — the bundle. Ask the agent: "From the trace and the build output (npm run build prints chunk sizes; or npx vite-bundle-visualizer), what dominates the JS payload?" Expected suspects: moment (with its full locale data) and lodash imported whole — for one formatted date and one orderBy. Fix: replace moment with Intl.DateTimeFormat (or date-fns), replace _ with a plain sort. Rebuild, re-trace, record JS-transferred delta. Expected: bundle shrinks dramatically; LCP/TBT improve on throttled load.
7. 7Fix 3 — the INP trap. The scorer is O(name × query) across 8,000 products, synchronously, on every keystroke. Fix with mechanism, not magic: debounce the expensive computation or move it behind useDeferredValue/startTransition (and fix the accidentally-quadratic scorer while you're there — a Set-based character match or includes check). Re-run the step-3 interaction trace. Expected: longest interaction under 200ms.
8. 8Close the loop in writing. Complete every cell of perf-log.md, each citing its trace. Add a three-sentence summary: which fix bought what, which agent insight was wrong or unverifiable, and the one-line team rule ("perf PRs attach before/after traces").

Verify

• •
  Four columns of perf-log.md complete; every number cites a specific trace (agent-reported or Lighthouse).
• •
  LCP < 2.5s and INP < 200ms and CLS < 0.1 on the final throttled trace; JS transferred down ≥ 30% from baseline.
• •
  Each of the three fixes has its own re-trace — no "fixed everything, measured once."
• •
  At least one agent claim was rejected as trace-unverifiable, and it's logged.
• •
  The search still returns correct results (type "Product 79" — sensible matches appear) — performance fixes that break behavior don't count.

Self-grading rubric (pass = 7/10)

• Loop discipline (0–4): every fix bracketed by traces, fixes applied one at a time = 4; batched fixes with a single after-measurement = 1.
• Diagnosis quality (0–3): all three seeded problems identified from the trace with mechanism (not from reading this lab's code comments) = 3.
• Thresholds met (0–2): all three Core Web Vitals targets green on the final trace = 2.
• Skepticism (0–1): at least one unverifiable insight caught and logged = 1.