A website performance budget is a set of fixed limits on page size, requests, and loading behavior that each new feature must stay within. It prevents slow pages by making teams measure cost, remove waste, or improve code before shipping. Small features add up fast. A chat widget, a video, and extra fonts can each seem harmless alone but combine into long waits for visitors on phones.
Table of Contents
- What should you limit?
- How do you set the first numbers?
- How do you check each change?
- What happens when a feature breaks the budget?
- How do you manage budgets in WordPress and Drupal?
What should you limit?
Focus on measures that shape visitor experience. Common limits cover total page weight, number of requests, JavaScript size, image weight, and key loading milestones.
Total page weight means total download size for one page view. For a content or store page, pick three to five limits. Fewer targets are easier to track and harder to ignore during busy releases.
How do you set the first numbers?
Start from your most important templates, not your homepage alone. Measure an article, listing, and checkout or contact page on a mid-range phone with a slow connection.
Choose limits slightly tighter than today's results. That creates room to catch growth without forcing a full rebuild at once.
How do you check each change?
Make checks part of normal review. Test the affected template before merge and block release when a limit fails.
Automated checks work best when tied to pull requests. A clear pass or fail keeps discussion focused on fixes.
- Record budget numbers in one shared file
- Test with throttled mobile network settings
- Compare new versus old results on the same template
- Require approval for any exception
What happens when a feature breaks the budget?
Treat a breach as a design choice. The team can make the feature smaller, remove something old, or split loading so less runs at first.
Common fixes include compressing images, removing unused scripts, loading third-party tools only when needed, and using system fonts for secondary text. If none fit, delay the feature until a saving is found.
How do you manage budgets in WordPress and Drupal?
Plugins, modules, and themes are the main source of growth. Each one can add scripts, styles, and remote calls across many pages.
Review added assets before activation and disable features you do not use. Set image sizes, limit auto-play media, and load maps, videos, and social feeds only on click.
