Page weight budget calculator

What it does

A page weight calculator adds up the bytes a page sends over the network and tells you how long that takes on real connections. Enter the transferred size of each resource type and set a budget. You get the total, how far over or under the budget it is, a breakdown by type and estimated download times on slow 3G, regular 3G, 4G and fast Wi-Fi. The biggest slice is named, with a short tip on how to cut it.

How to use it

1. Open the page in Chrome, then DevTools and the Network panel, disable the cache and reload.
2. Read the transferred size for HTML, CSS, JavaScript, images, fonts and media, and enter each in KB.
3. Set the budget you want the page to meet.
4. Check the badge and the breakdown, and start trimming with the biggest slice.
5. Change the numbers to test a fix before you make it, such as halving the images.

How to read the result

Total page weight is the sum of everything you entered. The budget badge says how far above or below your budget it sits, and Load on 4G is the download time on a typical 4G connection.

With the sample values, the page sends 1,995 KB: 45 KB of HTML, 120 KB of CSS, 480 KB of JavaScript, 1,100 KB of images, 160 KB of fonts and 90 KB of other media. Against a 1,500 KB budget that is 495 KB over. Images make up 55% of it, so they are the first target. On 4G it takes about 2.3 seconds to download, on regular 3G about 10.7 seconds and on slow 3G about 42 seconds.

Compressing the images by half would save 550 KB, bringing the page under budget and the 4G time down to about 1.8 seconds.

These times cover only the transfer plus three round trips of latency. Parsing and running JavaScript adds more, so treat them as the fastest the page could possibly load.

To turn the total into a hosting bill, use the bandwidth cost calculator. Setting and holding page budgets is part of our technical SEO work.