What problem does it solve? Slow load times, sluggish interactions, and unoptimized backend queries degrade user experience, but optimizing without measurement wastes effort on the wrong things. This Skill enforces a measure-first workflow that identifies real bottlenecks in Core Web Vitals, database queries, bundle size, and rendering before applying targeted fixes. ## Core Features & Use Cases - Measurement-First Workflow: Guides profiling with Lighthouse, Chrome DevTools, web-vitals RUM data, and backend timing before any optimization begins. - Anti-Pattern Fixes: Provides concrete code fixes for N+1 queries, unbounded data fetching, missing image optimization, unnecessary React re-renders, large bundles, and missing caching. - Performance Budgets & CI Enforcement: Defines budgets for bundle size, API latency, and Lighthouse scores with bundlesize and Lighthouse CI enforcement. - Use Case: Your React app's product page has a 5-second LCP. Use this Skill to profile the network waterfall, identify an unoptimized hero image and render-blocking scripts, apply responsive image markup with fetchpriority, and verify the improvement against Core Web Vitals thresholds. ## Quick Start Use the performance-optimization skill to profile my app's slow page load and fix the identified bottlenecks.
