frontend-performance-optimizer_skill

Overview

This skill analyzes and optimizes frontend performance using Core Web Vitals, bundle analysis, image and asset optimization, lazy loading, and caching strategies. It produces prioritized, actionable recommendations and optional performance budgets to guide improvements. Designed for quick audits or deeper framework-specific and root-cause investigations depending on needs.

How this skill works

It measures Core Web Vitals via Lighthouse or WebPageTest, inspects build artifacts or bundle analyzer output, and scans for common bottlenecks like large JS bundles, render-blocking resources, unoptimized images, and layout shifts. Depending on the requested tier, it adds framework-aware checks (React/Vue/Angular), waterfall analysis, and execution profiling. Outputs are structured reports with metric ratings, ranked recommendations, code snippets, and next steps.

When to use it

• Core Web Vitals fall outside ‘good’ thresholds (LCP >2.5s, FID/INP >100ms, CLS >0.1)
• Page load feels slow for users or load >3s on simulated 3G
• JavaScript bundle size exceeds 500KB gzipped or user reports interaction delays
• Preparing for production launch, audit, or tracking a performance regression
• You need a performance budget and CI integration guidance

Best practices

• Start with a T1 quick audit to get top-3 high-impact fixes before deeper work
• Provide a reachable URL or Lighthouse JSON and, if available, bundle analyzer output
• Prioritize LCP and interactive latency fixes first; then address CLS and third-party costs
• Use CI gates (Lighthouse CI, bundlesize) to prevent regressions
• Limit code examples to small, copy-pasteable snippets and follow framework docs for implementation

Example use cases

• Quick T1 audit for a React SPA to surface the top 3 issues and fixes before launch
• T2 extended audit for a Vue app including image format changes, font strategy, and caching rules
• T3 deep-dive when investigating a post-deploy regression or heavy third-party script impact
• Defining a performance budget and CI checks to enforce asset size limits
• Advising on component-level lazy loading and Web Worker offloading for heavy computation