Performance budget
Budget
In order to ensure snappy and standards-compliant front-end performance, each asset group should be limited to the following maximum numbers of files and total payload.
| Asset class | Max number of files | Total payload size |
|---|---|---|
| document | 1 | 20 kB |
| font | 8 | 250 kB |
| image | 20 | 500 kB |
| media | 3 | 100 kB |
| other | 20 | 100 kB |
| script | 5 | 100 kB |
| stylesheet | 3 | 50 kB |
| third-party | 5 | 60 kB |
| total | 40 | 1500 kB |
The above data comes from ./_data/budget.json, which is a performance budget file that can be directly used by the Lighthouse CLI to test pages against the budget.
If editing the budget.json file, please ensure to keep the asset classes in both resourceCounts and resourceSizes identical and in the same (alphabetical) order, since the way this table is rendered efficiently depends on that.
Background
Front-end performance is important, as reflected in this site's strategic plan. Performance affects multiple aspects of site operation:
- User visits and marketing conversions
- Server and bandwidth costs
- Usability on mobile, low-power, and slow-connection devices
- Brand perception
As a website team, it is our duty to keep site front-end performance within the budget whenever humanly possible. When we are in jeopardy of exceeding the budget, we can approach the issue in one or more ways (according to Tim Kadlec):
- Optimize an existing feature or asset on the page
- Remove an existing feature or asset from the page
- Don’t add the new feature or asset
Remove useful content instead
Great performance sometimes means making tough choices, but as a team we will prevail as long as we remain goal-oriented.
Resources
- Setting a performance budget by Tim Kadlec
- Performance budgets on the Mozilla Developer Network
- Performance budgets 101 at Google's web.dev