Skip to main content

Performance Clinic

Challenge on lesson: Checkpoint: Performance Diagnosis

CHALLENGE
Difficulty: intermediate+25 XP

Write THREE functions. 1) phaseOf(prop) โ€” map a CSS/JS property to its cheapest affected pipeline phase: "transform" and "opacity" => "composite"; "color", "background", "box-shadow" => "paint"; "width", "height", "top", "left", "font-size" => "layout"; unknown => "style". 2) budgetVerdict(actual, limit) โ€” return "ok" when actual <= limit, "over" when over by up to 10% (limit * 1.1), else "fail". 3) pickFix(symptom) โ€” map symptoms to fixes: "slow-ttfb" => "server", "huge-image" => "image-optimization", "long-task" => "chunking", "layout-shift" => "dimensions", "render-blocking-css" => "critical-css", unknown => "profile-first".

Back to lesson: Checkpoint: Performance Diagnosis