If you're building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, "what is really important to my users?"
When we talk to Fortune 500 companies that put in the work to improve performance, perf metrics will often rapidly regress once they return to feature development. Performance budgets can help teams prioritize features, optimizations and facilitate discussions on what is really important to users.
"Having a pre-defined 'budget' is a clear, tangible way to frame decisions about what can and can’t be included, and at a suitably early stage in the project" - Mark Perkins
What's a performance budget?
Metrics for perf budgets
Metrics for perf budgets can include milestone timings, quantity-based metrics or rule-based metrics.
Milestone timings: timings based on the user-experience loading a page (e.g Time-to-Interactive, First Contentful Paint). You’ll often want to pair several milestone timings to accurately represent the complete story during page load. Some teams also maintain custom metrics, like "Time to first tweet" for Twitter.
Rule-based metrics: scores generated by tools such as Lighthouse or WebPageTest. Often, a single number or series to grade your site.
Teams who incorporate perf budgets will often have CI warn or error a build if a PR regresses performance.
Examples of budgets
- Our search page must include less than 2MB of images on desktop
- Our home page must load and get interactive in < 5s on Slow 3G/Moto G4
- Our blog must score > 80 on Lighthouse performance audits
Below is a quantity metric - JS Size for The Guardian's desktop site on SpeedCurve. It highlights in yellow when under budget and red when over budget.
We can also visualize a milestone metric. Below is First Interactive (now First CPU Idle) - marking the point when the browser's main thread is not blocked for more than 50ms by any single task so user input can be responded to quickly.
Budgets can vary by a number of factors including target device class. Comparing the Guardian's mobile and desktop experiences we can see their total weights differ heavily:
This may suggest having budgets for different device classes are worth considering. e.g. < 170KB JS (min/gzip) for mobile and < 1.5MB for desktop where users may have faster CPUs and network connections.
Quantifying the impact of new features
"Deciding a page can’t exceed 500kB when a mock-up containing three carousels and a full-screen high-resolution background image has already been approved isn’t going to do you much good" - Tim Kadlec
Often, non-engineering stakeholders are unaware of the performance consequences of their decisions on features or design. This is not their fault. We need to make it easier for PMs, designers and stakeholders to understand the user-experience impact of their choices.
Even better is if we can make performance part of project goals from the start. This shifts the mentality of perf budgets only being a factor thought of during development to one where it's key throughout the project lifecycle.
Making trade-offs for user-experience
As with any financial budget, there may be times when your perf budget will be low. This can require you to make cuts or trade-offs in order to maintain a consistently fast user-experience. What features are really important to your users? Which ones excite or retain them the most?. This is a difficult conversation and is not always clear cut.
This conversation can result in dropping one feature to allow for another. 'Dropping' could mean removing it from the critical-path - the feature could still be loaded on-demand at a later point when the user needs it.
In such situations, you can make a call on a page-by-page basis while consulting the performance budget as the source of truth so you can continue to reach your goals.
Performance budgets are aided by having internal processes for operationalizing a performance culture within a business. Organizational performance budgets ensure that a budget is owned by everyone rather than just being defined by one group. Perf budgets can't be something only engineering teams care about.
"Web performance budgets should be a collaborative effort about the right factors to create an equation to help the business make the right decisions and generate necessary insights to move its product forward. This is far more fruitful than a potentially antagonizing conversation about sticking to a fixed web performance threshold." - Tobias Baldauf
When budgets have been set and the entire organization is aware early on what the budget parameters are, you're able to say performance isn't just an engineering issue, but a critical piece of the whole package as a site is constructed.
It provides a guideline for design and engineering when considering performance and should be checked with each decision that could impact performance.
Monitoring services like SpeedCurve also enable you to benchmark your site against competitors, allowing you to easily visualize how they perform on your budgets. This can be a powerful aid when speaking to stakeholders about why staying "under-budget" is important.
Tools for enforcing perf budgets
Many tools exist for enforcing performance budgets.
Other teams use Webpack's built-in support for perf budgets. You can configure performance.hints to warn or fail a build when budgets are crossed.
SpeedCurve support setting budgets for a wide range of metrics, resource sizes and Lighthouse audit categories.
Zillow use SpeedCurve to set budgets for their quantity (e.g. image size) and milestone timing metrics in mobile search. Other performance monitoring services like Calibre also support setting budgets and alerts for when they regress.
If you're at the planning stages of deciding what your target budgets should be, performancebudget.io is a visual aid with presets for different network speeds.
Performance budgets usher a culture of accountability that enable stakeholders to weigh the impact to user-centric metrics of each change to a site. Talk to your organization and see if you can get by in to adopt performance budgets for your projects. If it's worth getting fast, it's worth staying fast. ❤️
- Can you afford it? Real-world web performance budgets
- Performance Budget with Tim Kadlec
- Design Decisions Through The Lens of a Performance Budget
- Zillow on tracking performance budgets with SpeedCurve
- Performance Budgets: The What, Why and How
- Web Performance Budgets are more than mere thresholds
- How we shaved 1.7 seconds off casper.com by self-hosting Optimizely
- Why You Should Use a Performance Budget