What problem does it solve? Slow page loads, sluggish interactions, and unoptimized backend queries degrade user experience, but optimizing without measurement wastes effort on the wrong things. This Skill provides a structured measure-identify-fix-verify workflow so you target the actual bottleneck instead of guessing. ## Core Features & Use Cases - Measurement-First Workflow: Establishes baselines with synthetic tools (Lighthouse, DevTools Performance tab) and real-user monitoring (web-vitals library, CrUX) before any optimization. - Bottleneck Diagnosis: Decision trees map symptoms (slow LCP, high CLS, poor INP, slow API responses) to likely causes like N+1 queries, render-blocking resources, or large bundles. - Anti-Pattern Fixes: Concrete code examples for N+1 queries, unbounded data fetching, unoptimized images, unnecessary React re-renders, large bundles, and missing caching. - Use Case: Your dashboard page loads in 6 seconds. Use this Skill to profile the network waterfall, discover an N+1 query pattern in the transactions endpoint, fix it with a single joined query, and verify the improvement against Core Web Vitals thresholds. ## Quick Start Profile my app's slow dashboard page and identify the performance bottleneck, then fix it and verify the improvement with before-and-after measurements.
