Intermediate → advanced curriculum
Master web performance
Eight modules, seven interactive labs, and a live Web Vitals HUD — built to make you dangerous at FCP, LCP, INP, CLS, and everything that supports them.
Core Web Vitals at a glance
Server response latency — how long until the first byte of HTML arrives.
When the first text or image is painted to the screen.
When the largest visible content element finishes rendering.
Responsiveness — latency of interactions across the page lifetime (p98 of interactions).
Visual stability — sum of unexpected layout shift scores.
Curriculum
- 00 Foundations & Mental Model
Navigation lifecycle, critical rendering path, main thread, event loop, and perception budgets — the substrate everything else builds on.
- 01 The Metrics — Lab vs Field
FCP, LCP, CLS, INP, TTFB, TBT — thresholds, percentiles, PerformanceObserver, and the web-vitals library.
- 02 Loading — TTFB, FCP & LCP
Render-blocking resources, resource hints, fetchpriority, images, fonts, caching, and delivery architecture for fast first paint.
- 03 Interactivity — INP & TBT
Long tasks, LoAF, yielding with scheduler.yield, debouncing, workers, and hydration strategies.
- 04 Visual Stability — CLS
Layout shift sources, space reservation, fonts, embeds, transform-only motion, and bfcache interactions.
- 05 Rendering & Runtime Performance
Reflow, repaint, composite, layout thrashing, content-visibility, containment, and the 16ms frame budget.
- 06 Measurement & Tooling
DevTools Performance, Lighthouse, CrUX, RUM pipelines, performance budgets, and bundle analysis.
- 07 Advanced Topics
Speculation Rules, bfcache, streaming SSR, memory leaks, and build-time performance engineering.
How this site teaches perf
- Zero JS by default — Astro ships static HTML for lessons
- Islands only for labs — interactivity where you need it
- Self-hosted variable fonts — with metric-adjusted system fallbacks
- Live RUM on every page — the ◈ Vitals HUD uses
web-vitals