Page weight budget calculator
Set a target load time and a connection speed, and this calculator works out how many kilobytes your page can weigh. It splits that budget across images, JavaScript, fonts, CSS and HTML so you have a number to design to.
(2.5 s − 4 round trips × 150 ms) × 1.6 Mbps ÷ 8 = 380 KB. Transfer sizes after compression. This ignores parsing and rendering time, so treat it as a ceiling.
Want me to find what is slowing your site down?
Send me your website and I’ll list the heaviest things on your homepage and what each costs in load time. Free.
How to use it
Choose a connection, or enter your own download speed and latency.
Set the time in which the main content should be downloaded.
Read the total budget, then adjust the split to match your page.
Compare with your real page weight in your browser’s network panel.
Why it matters
Speed is a design decision. Every hero video, font weight and tracking script is paid for in seconds on a phone, and those seconds are when visitors decide whether to stay.
A budget turns “make it fast” into a number. The maths here is transparent: time left after connection setup, multiplied by download speed. It ignores browser parsing and rendering time, so treat the result as an upper limit, not a target to fill.
Google’s Core Web Vitals give useful thresholds for the result: Largest Contentful Paint within 2.5 seconds is “good”. Working back from that, with room for rendering, is a sensible way to set a budget.
Good to know
About the presets
The Lighthouse preset matches Lighthouse’s default mobile throttling: 1.6 Mbps and 150 ms round trip. The others are round examples, not measurements. Use your own numbers if you have them.
Compressed sizes
Budgets are for bytes over the wire, after gzip or brotli compression. Images and fonts are already compressed.
The split is a starting point
My default split favours images, because photos sell most service businesses. A web app will need more for JavaScript.
Page weight budget calculator: questions
As small as it can be while doing its job. This calculator gives an upper limit for your target time and connection. On the sites I build, I aim to keep the main content of a page well under a megabyte.
A limit on page weight, request count or timing that a team agrees to stay within. It turns speed into a design constraint instead of an afterthought.
Before any content arrives, the browser needs several round trips to look up the domain and open a secure connection. On high-latency mobile networks that alone can take a noticeable part of a second.
Open your browser’s developer tools, go to the Network tab and reload. The bottom bar shows the transferred size. PageSpeed Insights also lists the heaviest resources.
Keep reading
- nick@tavro.ca
- 587-439-9994
- Calgary, Alberta