Skip to main content

Performance 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 30 kB
font 8 250 kB
image 20 500 kB
media 3 100 kB
other 20 100 kB
script 5 100 kB
stylesheet 3 100 kB
third-party 5 60 kB
total 40 1500 kB


Metric Budget
first-contentful-paint 750 ms
first-cpu-idle 750 ms
interactive 750 ms
first-meaningful-paint 750 ms
max-potential-fid 100 ms
estimated-input-latency 100 ms
total-blocking-time 100 ms
speed-index 1500 ms
largest-contentful-paint 2500 ms

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.


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.