How do you use a performance budget?
Answer
Set measurable limits for resources and user outcomes—such as JavaScript bytes, LCP, or INP—then enforce them in CI and monitor them in production. A budget makes performance a release criterion rather than a cleanup task.
Context
Web performance is measured at the user level. Protect the critical rendering path, reduce main-thread work, and validate improvements against field data rather than bundle size alone.
Example
html
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
<img src="/hero.webp" width="1200" height="675" alt="Product dashboard" />Preloading the verified LCP image and reserving its dimensions can improve loading and prevent layout shift.
Practical considerations
- Choose the approach from the requirement and constraints, not from habit.
- Include validation, error handling, and cleanup where the boundary requires them.
- Verify the observable result with focused tests or measurement.
Follow-up prompts
- What failure mode would you expect if this were implemented incorrectly?
- How would you test this behaviour?
- What changes when the feature must scale to a larger application or team?
In practice
For this easy-level topic, make assumptions explicit, choose the smallest safe implementation, and verify the behavior at the relevant boundary.