What problem does it solve? Interfaces that feel slow, janky, or heavy frustrate users, but teams often optimize the wrong thing. This Skill guides you to measure first, identify the actual bottleneck (load time, rendering, animation, or bundle size), fix it, and verify the improvement with real metrics. ## Core Features & Use Cases - Bottleneck Diagnosis: Measure Core Web Vitals (LCP, INP, CLS), bundle size, frame rate, and network waterfalls before changing any code. - Targeted Optimization Playbooks: Concrete techniques for images (WebP/AVIF, srcset, lazy loading), JavaScript (code splitting, tree shaking), CSS, fonts, layout thrashing, GPU-accelerated animation, and React re-render reduction. - Verification Workflow: Compare before/after Lighthouse scores, test on low-end devices and throttled 3G connections, and confirm no functional regressions. - Use Case: A React dashboard feels sluggish on mobile. Use this Skill to profile it, discover a 2MB unoptimized hero image and layout thrashing in a scroll handler, apply responsive images and batched DOM writes, then confirm LCP drops below 2.5s. ## Quick Start Ask the AI to diagnose why your page feels slow and fix the biggest performance bottleneck, measuring before and after.
