A performance budget is a set of numeric thresholds your team agrees never to exceed: load time, page weight, number of requests, Core Web Vitals scores. If a new feature breaks those limits, it doesn't ship until it's fixed.
In short: it's the rule that prevents your site from getting slower every time someone adds a plugin, a 3 MB hero image, or an unreviewed analytics script.
Why Does Web Performance Matter?
Google has used speed metrics — especially Core Web Vitals — as a ranking signal since 2021. A slow site doesn't just lose visits: it loses revenue.
- 53% of mobile users abandon a page that takes more than 3 seconds to load (Google/SOASTA).
- Each additional second of load time can reduce conversions by 7–20%.
- Amazon once estimated that a 100 ms delay cost 1% of sales.
Without a performance budget, every development cycle adds kilobytes and milliseconds until the problem is too large to ignore — and too expensive to fix quickly.
Types of Metrics That Make Up a Performance Budget
A solid budget covers three categories:
Quantity Metrics
- Total page weight (KB / MB): recommended ≤ 1.5 MB on mobile.
- Number of HTTP requests: every external resource adds latency.
- Image weight: usually the biggest offender; aim for ≤ 500 KB total.
- JavaScript weight: ≤ 300 KB compressed is a reasonable limit for most sites.
Timing Metrics
- Time to First Byte (TTFB): ≤ 800 ms (Google recommends ≤ 600 ms in lab).
- Largest Contentful Paint (LCP): ≤ 2.5 s for "good".
- Total Blocking Time (TBT): ≤ 200 ms.
- Interaction to Next Paint (INP): ≤ 200 ms.
Tool Scores
- Lighthouse Performance: many teams require ≥ 85 on mobile.
- PageSpeed Insights: separate lab data (simulated) from field data (CrUX).
| Metric | "Good" target | Alert threshold |
|---|---|---|
| LCP | ≤ 2.5 s | > 4 s |
| INP | ≤ 200 ms | > 500 ms |
| CLS | ≤ 0.1 | > 0.25 |
| TTFB | ≤ 800 ms | > 1.8 s |
| JS weight (gzip) | ≤ 300 KB | > 500 KB |
| Total page weight | ≤ 1.5 MB | > 3 MB |
How to Set Your First Performance Budget in 4 Steps
1. Measure Your Current State
Use PageSpeed Insights, WebPageTest, or Lighthouse CLI to get a baseline. Without current data, any limit you set is arbitrary.
2. Benchmark Your Competition
If your closest competitor loads in 1.8 s and you load in 3.5 s, you already have a goal: beat 1.8 s. Agencies like elenlace.com can audit your site and your competitors' in a single report.
3. Set Limits by Metric Category
Don't pick a single number. Define limits for page weight, image weight, JavaScript, and the timing metrics that matter most to your business (e-commerce → LCP and INP; blogs → LCP and CLS).
4. Integrate the Budget Into Your Workflow
A performance budget only has value if it blocks deploys that violate it. Integrate it into your CI/CD pipeline with tools like Lighthouse CI, Bundlesize, or webpack-bundle-analyzer.
Common Mistakes When Applying a Performance Budget
- Defining it and forgetting it: review it every quarter; your needs change and industry standards evolve.
- Testing only on desktop: most traffic worldwide is mobile on variable networks. Always test under mobile conditions.
- Not involving the design team: a 5 MB hero image will destroy any budget. Limits must be agreed upon before designing, not after.
- Ignoring third-party scripts: analytics, live chat, ad pixels — each one adds up. Budget for them too.
For a deeper look at individual metrics, browse the rest of our web performance optimization articles.
Key Takeaways
- A performance budget is a team agreement: it defines how slow your site should never get.
- It covers quantity metrics (weight, requests), timing metrics (LCP, TTFB, INP), and tool scores (Lighthouse).
- Set one in 4 steps: measure baseline, benchmark competitors, define limits by category, enforce via CI/CD.
- Without automation to enforce it, the budget is just a document nobody reads.
- Review it quarterly and always include mobile conditions in your tests.
Ready to set a performance budget that actually sticks? elenlace.com offers performance audits and hands-on optimization for businesses of all sizes — reach out today.
FAQ
Is a performance budget the same as a financial budget?
No — "budget" here is a metaphor. Just as you can't spend more money than you have, you can't "spend" more kilobytes or milliseconds than your site can afford without degrading user experience.
Which tool should I use to monitor my performance budget?
Lighthouse CI is the most popular option for integrating with GitHub Actions or GitLab CI. For continuous production monitoring, SpeedCurve or Calibre are robust choices. For smaller projects, a weekly PageSpeed Insights check is a great starting point.
How much should a web page weigh according to a performance budget?
There's no universal number, but the common reference is ≤ 1.5 MB on mobile for most sites. For image-heavy e-commerce, up to 2 MB is acceptable if images are optimized (WebP, lazy loading) and JavaScript is minimal.
How often should I review my performance budget?
At minimum, every quarter and always before launching a major feature. It's also worth revisiting whenever Google updates its Core Web Vitals recommendations or when you add significant new third-party integrations.
Compare providers
Other providers and guides worth comparing:
