Everything you need to know about performance budgets

Hi there,

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:

1. Milestone timings (e.g. start render)
2. Quantity-based metrics (e.g. page weight)
3. Rule-based metrics (e.g. Lighthouse scores)

..........

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:

• What your budget amount is
• When you go out of bounds
• How long you're out of bounds
• When you've fixed the problem and are back within your budget

..........

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:

• Start render (Synthetic and LUX): 2s
• Speed Index (Synthetic): 4s
• CPU scripting fully loaded (Synthetic): 2s
• Last Painted Hero (Synthetic): 5s

If you use LUX, our real user monitoring solution, we also encourage you to track these metrics:

• First Input Delay (FID): 10ms
• Long Tasks: 500ms

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:

• Create performance budgets for your popular and regularly changing pages. 
• Review performance budget violations early and always.
• Compare performance pre- and post-release and update budgets accordingly.

..........

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.)

Zillow uses SpeedCurve to set budgets for their quantity (e.g. image size) and milestone timing metrics in mobile search. (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!)