/performance-budget-lab

name: performance-budget-lab
description: "Set performance budgets before implementation."

Performance Budget Lab

Use this skill to keep visually rich sites fast.

Own the budget and acceptance policy. Route measured runtime diagnosis, implementation fixes, and React/Next performance work to `$performance-audit-websites`.

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

1. Identify stack and deployment target. 2. Inspect package dependencies and route structure. 3. Define route, hardware/device, network/cache state and measurement method. 4. Run Lighthouse or browser performance checks when feasible. 5. Check Core Web Vitals (LCP, CLS, INP) and supporting diagnostics such as TTFB; choose metrics that measure the budgeted user experience. 6. Set media/JavaScript/font budgets from the intended experience and baseline evidence. 7. Prefer CSS and Motion for small interactions; reserve GSAP/R3F/video for clear value. 8. Report tradeoffs honestly when visual richness costs performance.

Use Lighthouse or browser checks here to validate a budget decision, not to take ownership of deep runtime diagnosis. When the work shifts from setting thresholds to locating and repairing the bottleneck, hand off to `$performance-audit-websites`.

Output

Give:

• current risks
• recommended budgets
• measurement conditions and reconsideration rules
• commands run
• remaining uncertainty

Scope and evidence

Output a budget contract: route/device class, hardware, network/cache state, metric, threshold, test method and reconsideration condition. Route measured diagnosis/optimization to `$performance-audit-websites`; a budget-only request does not implement repairs.