| name | performance-budget-lab |
| description | Use for website performance planning, Lighthouse/web-vitals checks, bundle/media/font budgets, Core Web Vitals triage, image/video optimization, animation performance, deployment readiness, and premium-site speed audits. |
Performance Budget Lab
Use this skill to keep visually rich sites fast.
Budget Areas
- JavaScript bundle size
- route-level code splitting
- image dimensions, formats, and lazy loading
- video poster, preload, autoplay, and reduced-data behavior
- font loading and fallback metrics
- animation cost and scroll handlers
- layout shift sources
- server rendering/static rendering choices
- caching and CDN behavior
Workflow
- Identify stack and deployment target.
- Inspect package dependencies and route structure.
- Run available build/lint/test commands.
- Run Lighthouse or browser performance checks when feasible.
- Check Core Web Vitals risks: LCP, CLS, INP, TTFB.
- Optimize media before adding more JS.
- Prefer CSS and Motion for small interactions; reserve GSAP/R3F/video for clear value.
- Report tradeoffs honestly when visual richness costs performance.
Output
Give:
- current risks
- recommended budgets
- concrete fixes
- commands run
- remaining uncertainty
