Skip to main content

Utility (external) navigation

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:

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

  1. Optimize an existing feature or asset on the page
  2. Remove an existing feature or asset from the page
  3. Don’t add the new feature or asset
  4. 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