Performance Budgets: Keeping Your Website Fast as It Grows

Most websites start fast and slowly become sluggish: a new tracking script here, a larger image there, another plugin next month. A performance budget stops that drift by setting limits everyone agrees to respect.

What is a performance budget?

It is a set of measurable limits for your pages, such as total page weight, JavaScript size, number of requests or Core Web Vitals scores. Before adding something new, you check whether it fits within the budget.

Example budgets

• Largest Contentful Paint under 2.5 seconds on a mid-range phone.
• Interaction to Next Paint under 200 milliseconds.
• Total JavaScript under a chosen size, for example 200 KB compressed.
• Hero image under a set file size.
• No more than a set number of third-party scripts.

How to set yours

1. Measure your current pages and your best competitors.
2. Set targets slightly better than today, then tighten them over time.
3. Write them down and share them with designers, developers and marketers.

Enforce it

• Run automated checks such as Lighthouse in your build process.
• Monitor real-user data in Search Console and analytics.
• Require a short justification for any third-party script.
• Review the largest resources every quarter.

Trade-offs are allowed

If a feature is worth the weight, remove something else to stay within budget. The point is to make performance a conscious choice, not an accident.