Make room for creativity with a performance budget

A large image, a font and a small animation can each seem reasonable in isolation. Together with analytics, embeds and other scripts, they can make a page heavier than the team intended.

Set the budget around the experience

A performance budget sets limits that a team can check as the website changes. These might cover image and script weight, request counts or loading and interaction measurements. Choose the measures that reveal problems in your important journeys.

Start with a representative phone and a realistic connection. Measure a few key pages before setting targets. A homepage and a complex product tool may need different limits; document why.

Give each visual element a job

• Use imagery that explains the work, and deliver it at appropriate sizes.
• Question scripts and embeds that do not help a visitor complete a task.
• Give animation a static alternative and respect reduced-motion preferences.
• Check the experience after content changes, not only after code releases.

Make the tradeoff visible

When a new feature exceeds the agreed budget, decide together what to simplify or remove. Record the decision and measure again. A budget is most useful when it changes a decision.

This belongs in the brief for web design and development. Read web.dev’s introduction to performance budgets for the technical background.