L6 — Performance & Audits
Track 2: Vibe-Coder Level-Up · B.U.I.L.D. letter: D (Document, Test & Deploy)
"It feels fast to me" — said the developer on a brand-new laptop and gigabit wifi. Your users aren't on that. Let's measure reality instead of guessing.
⚠️ The vibe trap
Performance and accessibility get judged by feel, on the best possible device. Real users have older phones, slower networks, and different needs. The fix isn't guessing harder — it's measuring, then fixing what the numbers show.
🔦 Run a Lighthouse audit
Built into Chrome DevTools (and free online). It scores four things and tells you exactly what to fix:
- Performance — how fast it loads and responds
- Accessibility — a machine-checkable slice of L2's a11y work
- Best Practices — security/modern-web hygiene
- SEO — can search engines understand it
Rule: measure before you optimize. A number you can re-check is the difference between engineering and superstition.
🚀 The highest-leverage fixes (usually)
- Images — the #1 culprit. Resize/compress them; don't ship a 4000px photo into a 300px box. Use modern formats.
- Bundle size — ship less JavaScript; drop libraries you barely use.
- Lazy-load what's off-screen; don't block the first paint.
- Cache static assets.
🩺 The full audit pass
Before calling anything "done," run the trio: Lighthouse + the Security Audit Checklist + the Pre-Ship Checklist. That's a real developer's pre-flight.
🛠️ Your mission
Run Lighthouse on something you built. Record all four scores. Fix the single biggest issue it flags (often an image). Re-run it and post your before → after numbers. Watching a score jump is addictive — that's the point.
✅ You're done when…
- You have baseline Lighthouse scores written down
- You fixed at least one flagged issue and re-measured the improvement
- You've run the full audit trio (Lighthouse + Security + Pre-Ship)
➡️ Next: L7 — Ship It Right. Build It Right, Or Don't Build It At All. 🏛️