Frontend Performance Optimizer

Problem

Front-end performance tuning often stalls at the point where the metric is bad but the fix is unclear: a Lighthouse score can drop while LCP, TBT, and CLS still cannot be traced to a specific build config, asset, or code path. This skill turns that uncertainty into a bounded workflow: confirm tooling, capture a baseline, select the Top 3 issues, modify only after user confirmation, and re-verify.

Workflow

It defaults to human-in-the-loop steps, pausing after each Step for approval. The main path is:
- PRECHECK: verify Node/npm, Lighthouse CLI, and Chrome DevTools MCP capabilities without auto-installing missing tools.
- PROFILE / MEASURE: build a project profile, run Lighthouse CLI against target pages to collect Performance and Best Practices JSON, and save raw artifacts.
- ANALYZE / SUGGEST: rank candidates from metrics, Opportunities, Diagnostics, and trace evidence, then present a recommendation table without editing code.
- EXECUTE / VERIFY / RECORD: apply small, evidence-linked changes for build, asset, code, or micro-frontend issues; run project builds; re-measure under matching conditions; update perf-record/.

Boundaries

It fits front-end projects that can be started locally, allow page access, and permit code changes. If pages depend heavily on login, third-party SDKs, backends, or CDN policy, missing data and external constraints should be recorded. The process does not force five rounds; it targets simultaneous Performance and Best Practices thresholds and re-evaluates after round three.