Frontend EngineerAdvanced8 modules~4.0 hours hands-on3 learning modes
Frontend Performance & Delivery
Turn Atlas Market, a polished but slow commerce experience, into a fast and observable production frontend by measuring real bottlenecks, improving Core Web Vitals, shaping bundles and assets, and enforcing performance budgets in CI.
// What you'll be able to do- Connect user journeys, field data, lab traces, and budgets
- Improve document latency, LCP discovery, and render blocking
- Deliver the right images, fonts, and dimensions without CLS
- Inspect the module graph, split intentionally, and recover stale chunks
8 modules, built to run
Every module ships runnable code. Expand any one to see what's inside.
00IntroductionThe performance investigation you'll lead30 min
Questions this module answers
- How do you see the complete Atlas Market optimization journey?
- How do you choose the learning path that fits your goals?
Start moduleFree preview
01Measure Before You OptimizeConnect user journeys, field data, lab traces, and budgets30 min
Questions this module answers
- How do you define critical user journeys before choosing performance metrics?
- What distinguishes field Core Web Vitals from controlled lab diagnostics?
02Loading and the Critical PathImprove document latency, LCP discovery, and render blocking30 min
Questions this module answers
- How do you separate document latency from browser resource-discovery time?
- How do you enforce critical-path decisions with runnable source audits?
03Responsive Assets and Stable LayoutDeliver the right images, fonts, and dimensions without CLS30 min
Questions this module answers
- How do you author accurate srcset and sizes contracts for responsive images?
- How do you use picture for format fallback and intentional art direction?
04JavaScript Delivery and Route BundlesInspect the module graph, split intentionally, and recover stale chunks30 min
Questions this module answers
- How do you inspect Vite 8 and Rolldown output through the generated bundle manifest?
- How do you split code at route-level user journeys with stable direct imports?
05Interaction PerformanceDiagnose INP, long tasks, rendering cost, and main-thread contention30 min
Questions this module answers
- How do you separate input delay, event-handler processing, and presentation delay in an interaction trace?
- How do you reduce synchronous filtering work and yield during CPU-heavy catalog operations?
06Budgets, Telemetry, and DeliveryProtect gains with field instrumentation and automated release gates30 min
Questions this module answers
- How do you convert Atlas Market's performance goals into deterministic build and CI gates?
- How do you collect privacy-conscious LCP, INP, and CLS telemetry from production journeys?
07Pattern SynthesisSee it run: prove the optimized journey under production conditions30 min
Questions this module answers
- How do you run the complete automated performance and production-build gate?
- How do you connect each release decision to reproducible lab evidence, field thresholds, and an explicit owner?
Ready to start Frontend Performance & Delivery?
Start with the free Module 0, then unlock the full course on a Pro plan.