Oct 1, 2018
Everything you need to know about performance budgets
Making your site fast is just the first step in your performance journey. You also have to keep it fast. This is why you need performance budgets.
Performance budgets aren't exactly new. People have been talking about them for at least five years. But over the past few months, performance budgets have moved into the spotlight – recently culminating in this excellent post by Google engineer Addy Osmani.
What is a performance budget?
As Tim Kadlec explains:
"A performance budget is just what it sounds like: you set a 'budget' on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page."
What kinds of metrics can you budget?
You can apply performance budgets to anything you can measure, including:
What does a good perf budget look like?
A compelling perf budget is visual – something you can show even to non-technical folks.
As the chart above (from our demo account for The Guardian) shows, a good perf budget visualization shows you:
Suggested performance budgets
When you sign up for SpeedCurve, we automatically give you a 'Performance Budgets' dashboard in your Favorites. This dashboard includes some default metrics and budgets:
If you use LUX, our real user monitoring solution, we also encourage you to track these metrics:
IMPORTANT: These defaults are intended as a jumping-off point. To create the most meaningful performance budgets for your site, look at your own data in your other SpeedCurve dashboards. We strongly encourage you to monitor your competitors' sites so you can create budgets that will help you stay faster than the competition.
How to monitor your perf budgets
Monitoring your budgets and getting alerts on them should be easy. We give you a few ways to do this:
Alerts (email and Slack) – When you create a custom chart in your Favorites dashboard, click on the 'Budget' tab, choose the metric you want be alerted on, set the threshold, and click SAVE.
Status dashboard – Monitor and manage all your Synthetic and LUX performance budgets – and see budget violations – in one place.
Weekly reports – Turn any Favorites dashboard into an email report that contains a week-over-week comparison of your data.
Care and feeding of your perf budgets
Some pro tips from the performance team at Zillow:
Real-world perf budget wins
Casper used perf budgets to track the performance impact of self-hosting a third-party script. (Read their case study.)
Where to find us IRL
We're excited to be a sponsor of the inaugural performance.now() conference, happening in Amsterdam on November 8-9. Our own Steve Souders (@Souders) and Tammy Everts (@tameverts) will be there as part of the all-star speaker lineup. They'd love to talk about perf budgets – or any other performance and UX topics – with you!
Tammy will also be at WebPerfDays Amsterdam on November 7. She'll be talking about how to create a strong web performance culture in your organization. (Hint: Performance budgets help!)