Skip to main content

Performance Clinic

Challenge on lesson: Checkpoint: Performance Diagnosis

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".

Difficulty: intermediate

Back to lesson: Checkpoint: Performance Diagnosis