Performance Architecture Hub
Use this hub when
- a route is slow in the field
- a redesign risks LCP, INP, or CLS
- third-party scripts affect revenue pages
- a framework migration promises performance gains
- you need a portfolio project around frontend performance
Reading path
| Step | Read |
|---|---|
| Foundation | part-0/performance-foundations, part-ii/critical-rendering-path-prioritization |
| Deep architecture | part-vi/performance-architecture, part-vi/core-web-vitals-deep-engineering |
| Budgets | part-vi/performance-budgets-ci-gates, part-xii/completed-examples/completed-performance-budget-example |
| Incidents | part-vi/performance-incident-response, part-xi/case-study-third-party-script-performance-incident |
| Capstone | capstones/capstone-performance-critical-lead-funnel, capstones/solution-packs/capstone-solution-pack-performance-lead-funnel |
| Assessment | rubrics/performance-architect-rubric |
Artifacts to produce
- route performance budget
- before/after trace
- Web Vitals dashboard specification
- third-party script register
- performance review packet
- incident postmortem
Review prompts
- Which user journey is slow?
- Is the evidence field data, lab data, or both?
- What changed by release, experiment, route, device, or third party?
- What is the rollback path?
Source lens
Use web.dev Web Vitals guidance for current metric framing and local performance chapters for architecture tradeoffs.