What problem does it solve? Pages that load slowly, stutter during interaction, or score poorly on Core Web Vitals (LCP, INP, CLS) hurt user experience, yet optimization attempts without a measured baseline often waste effort or regress other metrics. This Skill enforces a measure-first workflow: establish a baseline, locate bottlenecks, optimize, then re-test with a before/after comparison. ## Core Features & Use Cases - Baseline Measurement: Capture LCP, INP, CLS, TTFB, FCP, and bundle sizes using Lighthouse, PageSpeed Insights, web-vitals, Chrome DevTools, and bundle analyzers (vite-bundle-visualizer, webpack-bundle-analyzer). - Loading Optimization: Route-level code splitting, tree-shaking, on-demand component library imports, gzip/brotli compression, CDN caching, critical CSS/JS inlining, font subsetting, and responsive AVIF/WebP images with lazy loading. - Runtime Optimization: Reduce reflows and repaints, use compositor-friendly transform/opacity animations, split long tasks, debounce high-frequency events, virtualize large lists, and eliminate unnecessary re-renders in React (memo, state placement) and Vue (computed, shallowRef). - Use Case: A user reports their React dashboard feels sluggish. The Skill guides measuring a Lighthouse baseline, identifying an oversized bundle and unmemoized re-renders, applying code splitting and memoization, then delivering a before/after metrics table. ## Quick Start Analyze my page's performance problems and give me an optimization plan with baseline metrics and a before/after comparison.
