What Is a Performance Budget?
Learn what a performance budget is, why it matters for user experience and SEO, and how to set meaningful limits for your web pages. Covers total page weight, request counts, and timing metrics.
Detailed Explanation
Understanding Performance Budgets
A performance budget is a predefined set of limits on web page resources — total page weight, number of HTTP requests, time-to-interactive, and other metrics — that a team agrees not to exceed. It serves as a contract between designers, developers, and stakeholders to ensure the site remains fast.
Why Performance Budgets Matter
Every kilobyte you add to a page has a real cost:
- User experience — Slow pages frustrate users. Research consistently shows that pages loading in over 3 seconds lose roughly 50% of visitors on mobile.
- Conversion rates — E-commerce studies find that a 1-second improvement in load time can increase conversions by 7% or more.
- SEO rankings — Google uses Core Web Vitals (LCP, FID, CLS) as ranking signals. Exceeding performance budgets often correlates with poor Core Web Vitals scores.
- Equity and access — Not everyone has a fast connection. A budget ensures your site works for users on 3G networks and low-end devices.
Types of Performance Budgets
There are three common approaches:
- Quantity-based budgets — Limits on total page weight (e.g., max 500 KB), number of requests (e.g., max 30), or individual asset sizes (e.g., JS under 200 KB).
- Timing-based budgets — Limits on metrics like Time to Interactive (TTI < 5s), First Contentful Paint (FCP < 1.5s), or Largest Contentful Paint (LCP < 2.5s).
- Rule-based budgets — Lighthouse scores (e.g., Performance score >= 90) or specific checks (no render-blocking resources, all images lazy-loaded).
Setting Your First Budget
Start with a competitive analysis: measure the load times and page weights of the top 3 competitors in your space. Your budget should aim to be at least 20% faster than the fastest competitor.
Alternatively, use the reverse calculation method:
Total budget (KB) = Connection speed (Mbps) × Load time (s) × 125
For a 3G user (1.6 Mbps) with a 3-second target: 1.6 × 3 × 125 = 600 KB total.
Budget Allocation
Once you have a total weight budget, distribute it across asset categories:
| Category | Typical % |
|---|---|
| HTML | 5-10% |
| CSS | 5-15% |
| JavaScript | 30-45% |
| Images | 25-40% |
| Fonts | 5-15% |
| Other | 5-10% |
These percentages vary by site type. A blog allocates more to images, while a SPA allocates more to JavaScript.
Use Case
Setting a performance budget is the first step in any web performance optimization project. Product managers use budgets to set clear expectations with engineering teams. Developers reference budgets during code review to evaluate the cost of adding new features or dependencies. Performance budgets are especially critical during redesigns or platform migrations, where page weight tends to increase significantly without explicit constraints.