Why do you need a Performance Budget?

Slowness Costs $$$

Mobile

How do you set one up?

Budgets are only effective if they are used.

• Start your project with one
• Define what metrics will be used
• Every byte has a name
• Everyone is in agreement 

Metrics

“Fast” is relative.

Quantitative

Example: 3 JavaScript files vs 1 JavaScript file

Rule Based

Google PageSpeed Insights or YSlow

Milestone Based

• Time to first Byte
• Time to first Paint
• Time to domContentLoaded
• Time to Load

  Perceived

• Speed Index - Webpagetest.org
• Custom Metric

 Real User Measurement (RUM)

How do you stick to the budget?

If a new feature is needed:

• Refactor/optimize existing functionality to allow room in the budget

• Remove something already in the budget to make space

• Don’t implement the feature

What causes slowness?

How an HTML page loads:

1. Browser sends request
2. Server receives request
3. Server puts together a list of things to do (HTML file)
4. Server sends back the list
5. Browser reads the list, and then proceeds to retrieve all the items on the list
6. Browser then processes the assets as they get loaded

It’s all about latency.

Bandwith = Capacity

Latency

vs