Performance Budget Calculator

How many kilobytes can your page transfer and still load within a time budget? This calculator models real-world device CPU power and network conditions to give you a concrete transfer size target.

Size Budget (compressed)
--
KiB
Setup (TLS) Transfer Client Processing Total Budget
2
How It Works

The calculator models three components of page load time:

1. Setup Time (TLS Connection Establishment)

Before any data transfers, the browser must establish secure connections. Each critical connection requires TLS negotiation, which depends on network round-trip time (RTT). The setup cost scales with the number of critical connections (e.g., your origin server plus a CDN, analytics endpoint, etc.).

setup_time = connection_setup * critical_connections

2. Transfer Time

The time to download the page's bytes over the network, determined by bandwidth:

transfer_time = data_KB / (bandwidth_Kbps / 8)

This converts kilobits per second to kilobytes per second, then divides the transfer size.

3. Client Processing Time

Once bytes arrive, the browser must parse HTML, decode CSS, compile and execute JavaScript, and build the render tree. This cost scales with device CPU power, measured by Geekbench single-core scores relative to a Moto G4 baseline:

base_time_per_KB = 1 / 150   (~6.67ms per KB on Moto G4)
device_scale = moto_g4_score / device_score
client_time = data_KB * base_time_per_KB * device_scale

When JS Heavy is unchecked, the client processing cost is divided by 3.5, reflecting that markup-centric pages have far less parse/compile/execute overhead per byte than JavaScript-heavy SPAs.

Total Time & Size Budget

total_time = setup_time + transfer_time + client_time

The Size Budget is the transfer size (in KiB, compressed) at which total_time exactly equals your time budget. Any page smaller than this budget will load within the target time for the chosen device and network.

Why This Matters for CSE 135

Performance is not an opinion — it is a measurable engineering constraint. When you build and deploy web applications in this course, you should be able to state your performance budget in concrete terms: "Our page must transfer under X KB to load in Y seconds on a median device over a global P75 connection." This calculator gives you that number.

Attribution: This calculator is inspired by Alex Russell's Performance Inequality Gap, 2024 transfer budget tool. The calculation model, device benchmark data (Geekbench single-core scores), and network profiles are drawn from his research. This implementation is built from scratch using Canvas 2D with no external dependencies.