What problem does it solve?
This Skill helps you reduce sluggishness and improve user-perceived speed by diagnosing and fixing performance problems across loading, rendering, animations, media, and bundle size.
Core Features & Use Cases
- Performance measurement & bottleneck discovery: Collect Core Web Vitals, bundle/network/runtime metrics, and pinpoint what’s slow and why.
- Loading optimization: Improve image delivery, shrink JavaScript/CSS, optimize font loading, and apply smarter resource prioritization (preload/prefetch/CDN/caching).
- Rendering & interaction optimization: Prevent layout thrashing, reduce DOM/paint/composite costs, and apply techniques like content visibility and virtualization.
- Animation & network optimization: Use GPU-friendly animation patterns, avoid long main-thread tasks, reduce requests, compress responses, and tune for slow connections.
- Verification with before/after metrics: Use Lighthouse/DevTools and real-device testing to ensure improvements don’t regress functionality.
Quick Start
Ask the AI to optimize the dashboard by measuring Core Web Vitals, identifying the biggest bottleneck, and then applying the highest-impact fixes for loading, rendering, and animations with before/after verification.