What problem does it solve? Web pages become slow for many different reasons, and applying random optimizations wastes effort without improving the metric that matters. This Skill provides a systematic measure-first methodology to identify the single real bottleneck, fix it, and verify the improvement with before/after metrics. ## Core Features & Use Cases - Structured Profiling Workflow: A four-step loop (measure, identify bottleneck, optimize, re-measure) with a decision tree covering TTFB, asset size, main-thread blocking, and resource prioritization. - Concrete Optimization Patterns: Ready-to-use code for critical rendering path, code splitting, tree shaking, responsive images (AVIF/WebP), font loading, caching headers, service workers, and third-party script deferral. - Performance Budgets & Verification: Explicit budgets (JS < 300 KB, total page < 1.5 MB) and Core Web Vitals targets (LCP < 2.5s, TBT < 200ms) with Lighthouse and web-vitals measurement commands. - Use Case: A product page has an LCP of 4.2s. Follow the decision tree to discover the hero image loads too late, then apply preload with fetchpriority="high" and responsive AVIF sources, and confirm LCP drops below 2.5s. ## Quick Start Ask the agent to profile your slow page and apply the performance skill's bottleneck decision tree to produce a measured optimization plan.
