Course
Web Performance Engineering
Core Web Vitals in production — measure real users first, then fix what the data points at: bundle budgets, image strategy, caching, rendering paths, and the profiling workflow that finds the actual bottleneck.
Reviews
Enrolled members can rate this course.
No reviews yet.
Measure First
What Core Web Vitals actually measure, how to collect field data, and the profiling loop that turns a bad number into a specific cause.
- 01Core Web Vitals: What the Numbers Actually MeanLCP, INP, and CLS as user experiences rather than scores — the thresholds, the p75 rule, and the LCP sub-parts that tell you where to dig.22mOpen
- 02Field Data: Instrumenting Real UsersLab tests tell you what could happen; field data tells you what did. Collecting Web Vitals with attribution, sending them reliably, and slicing them so they point somewhere.25mOpen
- 03The Profiling Workflow That Finds the Real BottleneckFrom a bad field number to a specific line of code: reproducing under realistic conditions, reading a DevTools trace and a waterfall, and verifying the fix where it counts.28mOpen
The Loading Path
Bytes on the wire — JavaScript budgets, images that don't sabotage LCP, and caching that makes the second visit nearly free.
- 01JavaScript Bundle BudgetsWhy JavaScript is the most expensive byte you ship, how to see what's in the bundle, and how to set budgets that fail the build instead of relying on good intentions.25mOpen
- 02Image Strategy: Formats, Sizing, and the LCP ImageImages are usually the LCP element and usually the biggest bytes. Responsive sizing, modern formats, priority hints, and the lazy-loading mistake that slows down half the web.24mOpen
- 03Caching and Delivery: Making the Second Visit FreeCache-Control strategy for hashed assets versus HTML, CDN behaviour, connection setup, and the back/forward cache — the fastest request is the one never made.24mOpen
Rendering and Responsiveness
Critical rendering path, main-thread work and INP, and the guardrails that stop next quarter's regressions.
- 01Rendering Paths: From HTML Bytes to First PixelsWhat blocks the first paint, how CSR, SSR, SSG, and streaming change the LCP picture, why hydration is a hidden tax, and how fonts fit in.26mOpen
- 02INP and the Main ThreadWhy taps feel slow, the three phases of an interaction, finding long tasks with Long Animation Frames, and yielding so the browser can paint.28mOpen
- 03Guardrails: Keeping It Fast After You Fix ItPerformance decays by default. Lab budgets in CI, field-data regression alerts, third-party governance, and the team habits that keep the gains from evaporating.22mOpen