DevKit Tools

Page Weight and Load Budget Calculator

Add up your page weight, see it against a performance budget, and estimate load time on slow connections.

Budgets/Page Weight and Load Budget Calculator

Add up your page weight, see it against real world budgets, and estimate load time on a slow connection.

Page budget

HTML8 KB (from 30)
CSS17 KB (from 60)
JavaScript126 KB (from 450)
Images900 KB
Fonts120 KB
Other40 KB
Total raw1600 KB
Total transferred1211 KB
Latency cost1.20s
Transfer time1.21s
Estimated load2.41s

Over 300 KB of JavaScript. Bytes of script cost more than the same bytes of image, because the browser has to parse and execute them before the page becomes interactive.

HTML             30 KB raw       8 KB transferred
CSS              60 KB raw      17 KB transferred
JavaScript      450 KB raw     126 KB transferred
Images          900 KB raw     900 KB transferred
Fonts           120 KB raw     120 KB transferred
Other            40 KB raw      40 KB transferred

Total raw:         1600 KB
Total transferred: 1211 KB
Requests:          45

Connection:  Fast 3G (8 Mbps, 150ms latency)
Latency cost: 1.20s
Transfer:     1.21s
Estimated load: 2.41s

About the page weight and load budget calculator

Performance work goes wrong when it is guided by how a site feels on a fast laptop on office wifi. A performance budget replaces that with a number you can check, and estimating load time on a slow connection shows what a large share of real visitors actually experience.

The estimate accounts for both parts of the cost: transferring the bytes, and the round trips spent asking for them. On a high latency connection the round trips often dominate, which is why cutting request count can beat cutting kilobytes.

How to use it

  1. 1Enter the size of each asset type in kilobytes.
  2. 2Set the number of requests the page makes.
  3. 3Pick a connection to model.
  4. 4Leave compression on if your server has gzip or brotli enabled.
  5. 5Read the estimated load time and the warnings.

Questions

What is a good page weight?

Under about 1 MB transferred is a reasonable target for a content page, with JavaScript kept under 300 KB. Both are budgets rather than rules, and the load time on a slow connection matters more than either figure.

Why does JavaScript cost more than images?

An image is decoded on a background thread. Script must be downloaded, parsed, compiled and executed on the main thread before the page responds to input, so the same bytes hurt far more.

How accurate is the estimate?

It is a model, not a measurement. It captures transfer and latency, not server response time, render blocking resources or execution cost. Use it to compare options and to set a budget, then measure the real page.

How much does compression save?

Text compresses to roughly a quarter of its size with gzip, slightly better with brotli. Images, video and fonts are already compressed and do not shrink further.

More Performance tools