Syllabus — Web Performance Engineering for React & Next.js Commerce

57 lessons across 11 modules. Levels: 🟢 foundational · 🟡 intermediate · 🔴 advanced. Times are reading time; labs add 30–90 minutes each.

---

Module 0 — Orientation

#	Lesson	Level	Time
0.1	The reference application — Aurora Market's architecture, page types, baseline metrics, and the three structural problems the course fixes	🟢	15m
0.2	Impact/effort matrix — all 60+ optimizations in this course, scored and ranked, with expected deltas	🟢	20m

Module 1 — Foundations

#	Lesson	Level	Time
1.1	Why performance pays — conversion elasticity, how to build a business case, how to measure your elasticity instead of borrowing someone else's	🟢	20m
1.2	How pages actually load — DNS→TLS→TTFB→parse→render→hydrate, the main thread, and where React fits	🟢	30m
1.3	Core Web Vitals, precisely — LCP/INP/CLS definitions, the traps in each, and the metrics CWV doesn't cover	🟢	30m
1.4	Measuring: lab vs field — Lighthouse, DevTools traces, WebPageTest, CrUX, RUM; when each lies	🟢	35m
1.5	Performance budgets — setting them per page type, enforcing them, and what to do when they break	🟡	25m

Module 2 — Quick wins (days, not quarters)

#	Lesson	Level	Time
2.1	Images — next/image correctly, sizes, priority, AVIF, art direction, and the CDN economics of 2.4M product shots	🟢	35m
2.2	Fonts — next/font, subsetting, size-adjust fallbacks, and eliminating font‑driven CLS	🟢	25m
2.3	Third‑party scripts — the biggest single lever on most commerce sites: facades, next/script, consent, server‑side tagging	🟢	40m
2.4	Delivery, compression & CDN — Brotli/Zstd, HTTP/2 vs /3, preconnect, Early Hints, cache headers that actually work	🟢	35m
2.5	CSS and the critical path — render‑blocking CSS, Tailwind vs runtime CSS‑in‑JS, content-visibility	🟡	30m

Module 3 — Rendering architecture

#	Lesson	Level	Time
3.1	Choosing a rendering strategy — a decision tree per page type, with the cost of getting it wrong	🟡	35m
3.2	Server Components & client boundaries — where to put 'use client', the serialization tax, and RSC payload size	🟡	40m
3.3	Streaming & Suspense — shell‑first rendering, boundary placement, and streaming without shifting layout	🟡	35m
3.4	The Next.js caching layers — all five caches, the version matrix, and a probe to find out what your app really does	🔴	45m
3.5	ISR at catalog scale — 2.4M SKUs, on‑demand revalidation, tag design, cache stampedes	🔴	40m
3.6	PPR & personalization — static shell + dynamic holes; keeping price/stock/cart fresh without going fully dynamic	🔴	40m
3.7	Middleware, edge & runtimes — the hidden cost on every request, geo/AB routing, Edge vs Node	🟡	30m

Module 4 — JavaScript payload

#	Lesson	Level	Time
4.1	Bundle analysis workflow — reading the analyzer, attributing bytes to owners, tracking over time	🟡	35m
4.2	Code splitting — route vs component vs interaction splitting, next/dynamic, and when splitting makes things worse	🟡	35m
4.3	Dependency diet — the usual offenders on commerce sites (dates, i18n, icons, carousels, polyfills), with replacements and byte counts	🟡	40m
4.4	Hydration cost — why TTI ≠ LCP, selective hydration, islands, and measuring hydration directly	🔴	35m

Module 5 — React runtime

#	Lesson	Level	Time
5.1	Render model & profiling — reconciliation, what actually triggers re‑renders, reading the Profiler flamegraph	🟡	40m
5.2	Memoization & React Compiler — when memo/useMemo pay for themselves, and what the compiler changes	🟡	40m
5.3	State architecture — colocation, context splitting, external stores, and the cart‑context render storm	🔴	40m
5.4	Long lists & virtualization — 10K‑result PLPs, windowing, infinite scroll done right	🟡	35m
5.5	Concurrent React — transitions, useDeferredValue, yielding, and why they fix INP	🔴	35m
5.6	Forms, Server Actions & optimistic UI — instant add‑to‑cart, useOptimistic, action cost	🟡	35m

Module 6 — Core Web Vitals playbooks

#	Lesson	Level	Time
6.1	LCP playbook — the four subparts, diagnosis order, and fixes ranked by yield	🟡	40m
6.2	INP playbook — input delay vs processing vs presentation, long tasks, attribution in the field	🔴	45m
6.3	CLS playbook — the eight commerce sources of shift and how to kill each	🟢	30m
6.4	TTFB playbook — server timing, cold starts, origin waterfalls, cache hit ratio	🟡	35m

Module 7 — Data & backend

#	Lesson	Level	Time
7.1	Waterfalls & API design — request waterfalls, Promise.all, preload pattern, React cache(), N+1 in the BFF	🔴	40m
7.2	Caching architecture — layer map, SWR, surrogate keys, invalidation that doesn't page you at 3am	🔴	45m
7.3	Search & catalog data — facets, pagination, typeahead, and keeping search off the critical path	🟡	35m
7.4	Cart & checkout data — the uncacheable pages: session, pricing, tax, payment SDKs	🔴	35m

Module 8 — Advanced techniques

#	Lesson	Level	Time
8.1	Prefetching & speculation — Next.js prefetch, Speculation Rules, prerendering the next click without burning origin	🔴	40m
8.2	Offloading to workers — Web Workers, Comlink, Partytown, OffscreenCanvas	🔴	35m
8.3	Service workers & bfcache — safe SW patterns for commerce, and the free win most sites break	🔴	35m
8.4	Memory & long sessions — leaks in SPA navigation, detached nodes, measuring with measureUserAgentSpecificMemory	🔴	30m
8.5	Experimentation without regressions — A/B tests that don't cause CLS, flicker, or a second render pass	🔴	35m
8.6	Infrastructure & multi‑region — where to run compute, DB latency, connection pooling, Node tuning, autoscaling for peak	🔴	40m

Module 9 — Operating performance

#	Lesson	Level	Time
9.1	RUM implementation — collecting vitals with attribution, dimensions that matter, correlating with revenue	🟡	40m
9.2	CI gates & synthetics — Lighthouse CI, bundle budgets, Playwright traces, what to block a PR on	🟡	40m
9.3	Regression triage — an on‑call runbook for "LCP jumped 400ms overnight"	🟡	30m
9.4	Scaling the practice — ownership, scorecards, review rituals, and getting perf work funded	🟡	30m

Module 10 — Page playbooks

#	Lesson	Level	Time
10.1	Homepage	🟡	25m
10.2	Category / PLP	🟡	30m
10.3	Product / PDP	🟡	35m
10.4	Search	🟡	25m
10.5	Cart & checkout	🟡	30m
10.6	Mobile & low‑end devices	🔴	30m

Appendix

#	Document
A	Audit checklist — 120 checks, printable, grouped by area
B	90‑day roadmap — sequenced plan with owners and exit criteria
C	Anti‑patterns catalog — 30 things that look like optimizations and aren't
D	Glossary & tooling reference

Examples

Runnable code referenced throughout: examples/

• examples/rum/ — vitals reporter with attribution + a collection endpoint
• examples/ci/ — Lighthouse CI config, bundle budget script, GitHub Actions workflow
• examples/next-config/ — an annotated production next.config.ts

---

Suggested reading order if you're short on time

0.1 → 1.3 → 1.4 → 2.1 → 2.3 → 6.1 → 6.2 → 3.1 → 4.1 → 9.2