Performance Budgets set standards for the performance of a site.
- It is a LIFESTYLE, not a thought exercise.
| Budgets | + Measurement | + Feedback |
|---|---|---|
| Timing | Lab Data | CI Integration |
| Resources | Field Data | Alerts |
| Scores |
Speed of ...
- to Load
- to Ready
+ Direct measure of Page Performance
- High Variance
Max or Median (budget) against consistent environment.
Request count and size.
+ Very consistent
- Indirect measure of Page Performance
| Size | Notes |
|---|---|
| 700k | Total, not helpful |
| 300k | JS, Helpful |
| 250k | Images, Helpful |
| 100k | Fonts, Helpful |
| 50k | CSS, Helpful |
| 50k | HTML, Helpful |
JavaScript is expensive.
+ Easy to understand and communicate
+/- Fewer budgets to set
- Lighthouse
- WebPageTest
| Lab Data | Field Data |
|---|---|
| "Synthetic" | "real user monitoring (run)" |
| Data is from simulated users | Data is from actual users |
| * Lighthouse | * Chrome UX Report (CrUX) |
| * WebPageTest | * SpeedCurveLUX |
| * HTTP Archive | * Analytics Data |
| * Calibre |
(Budgets for file sizes, globbind and type of compression)
- Bootstrap
- Preact
- Lighthouse
(performance hits)
Warnings versus Errors
- npm
- Chrome Extension
- DevTools
- Lighthouse BOT
- Lighthouse Wallet
Custom Alerts ...