Web Design
The Performance Budget We Set Before Designing a Single Pixel
The four budgets we set
JS bundle size, total page weight, image weight, and third-party script count. Each has a hard ceiling communicated to design before any Figma work begins.
The design ceiling
Max 3 custom fonts, max 2 hero videos per site, max 300KB hero image. Designers hit these caps early and make better choices within them.
Enforcement
Lighthouse CI on every PR. If the PR regresses a budget, the build fails. Nobody merges around it 'just this once'.
Budgets aren't constraints
They're the thing that lets you add animation, good imagery, and interactive widgets where it matters. Without budgets, every page becomes a dumping ground.