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=truewith@next/bundle-analyzer, ornpx 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.