web-performance

Installation
SKILL.md

Web Performance

Measure → fix the biggest bottleneck → measure again. Never optimize blind.

1. Measure

  • Production build only (npm run build && npm run start / preview). Dev mode numbers are meaningless.
  • Lighthouse (mobile preset): npx lighthouse <url> --preset=perf --form-factor=mobile --output=json --output-path=./lh.json --chrome-flags="--headless" if Chrome is available; otherwise ask the user to run PageSpeed Insights and paste the result.
  • Bundle: npx vite-bundle-visualizer, ANALYZE=true with @next/bundle-analyzer, or npx source-map-explorer 'dist/**/*.js'.
  • Note the baseline: LCP, INP/TBT, CLS, total JS (gzipped), page weight.

Targets: LCP < 2.5s, INP < 200ms, CLS < 0.1, initial JS < ~170KB gzipped for content sites.

2. Fix by metric

Installs
1
First Seen
Today