Learning Path: Performance Architect
Target learner
This path is for engineers who want to own frontend performance as an architecture capability, not a late optimization pass. The target skill is diagnosing user-visible slowness, designing budgets, shaping rendering/data decisions around real devices, and building guardrails that prevent regressions.
Prerequisites
You should understand browser DevTools, JavaScript execution, HTTP basics, Core Web Vitals, route-level code splitting, and common React rendering causes. If not, start with Part 0 performance, browser runtime, tooling, and observability chapters.
Recommended chapter sequence
| Phase | Chapters | Outcome |
|---|---|---|
| Foundations | part-0/performance-foundations, part-0/browser-networking-runtime | Connect network, main-thread, and rendering costs to user experience. |
| Platform depth | Part II | Understand critical rendering path, event loop latency, caching, HTTP, mobile networks, memory, and runtime constraints. |
| Rendering choices | Part III | Choose server/client boundaries and data strategies that avoid hydration and waterfall waste. |
| Performance systems | Part VI | Build budgets, RUM, synthetic checks, profiling recipes, and incident response. |
| Review practice | review-packets/performance-review-packet | Turn diagnosis into team process. |
Six-week study plan
| Week | Focus | Required output |
|---|---|---|
| 1 | Cost model | Produce a route cost map: bytes, requests, render work, hydration, third parties. |
| 2 | Field measurement | Define p75 route metrics and segment by device/network class. |
| 3 | Profiling | Capture browser and React profiles for one slow interaction. |
| 4 | Budgets | Add route budgets for LCP, INP, CLS, JS, CSS, images, and third-party cost. |
| 5 | Governance | Design CI and review gates that block meaningful regressions. |
| 6 | Capstone | Complete the performance-critical lead funnel capstone. |
Required exercises
- Create a waterfall annotation for a slow landing page.
- Write an ADR for a rendering strategy change that reduces LCP without harming personalization.
- Write an ADR for third-party script governance.
- Simulate a performance incident and write a postmortem focused on recurrence prevention.
Capstone project
Complete capstones/capstone-performance-critical-lead-funnel. Use the case-study style from Part XI and the tutorial in Part VI. The final review must show before/after budgets, route profiles, third-party inventory, monitoring plan, and rollback strategy.
Portfolio artifacts
- Performance architecture scorecard
- Route budget file
- Profiling evidence
- Optimization backlog ranked by impact and risk
- Third-party register
- Performance incident playbook
Self-assessment rubric
Use rubrics/performance-architect-rubric. The minimum target is level 4 in performance diagnosis, observability, rendering/data tradeoffs, and stakeholder communication.
Review checklist
- Is every optimization tied to a user-visible metric?
- Are field and lab signals separated?
- Are budgets route-specific instead of generic?
- Does the team know who can approve budget exceptions?
- Are third-party scripts treated as production dependencies?