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".
Press Submit to check your solution.
Back to lesson: Checkpoint: Performance Diagnosis