Turning Content-Length Bytes into a Page-Weight Budget
Every tool that measures a web page hands you bytes. The Content-Length response header is bytes. curl -sI prints bytes. A build report that fails your CI job prints bytes. Yet the budget you actually negotiate with the team is written in kilobytes: 14 KB for the critical HTML, 60 KB for CSS, 170 KB for the framework bundle. This page closes that gap — you paste the raw byte count, you read the KB figure you can put in the budget document.
The arithmetic is trivial; the discipline is not. A performance budget only works if everyone measures the same thing, and byte counts are the one number that cannot be argued with. Converting them consistently is what keeps a budget honest across a build pipeline, a CDN dashboard and a browser network panel.
KB = bytes ÷ 1000. A stylesheet whose Content-Length reads 52340 is 52340 ÷ 1000 = 52.34 KB against your CSS budget.Bytes Are What Crossed the Wire
Kilobytes Are What the Budget Speaks
Compression Changes the Number, Not the Unit
Checking an Asset Against Your Budget
Grab the byte count
Take the value from the Content-Length header, the size column of your bundler report, or a curl -sI against the deployed URL. Digits only — thousands separators and stray spaces are ignored, and a comma is read as a decimal point.
Type it into the byte field
The kilobyte figure updates as you type, so you can walk down a list of assets without pressing anything between entries. Very large or very small values switch to scientific notation automatically.
Copy the bare figure into the budget sheet
The copy button on each field puts the plain number on your clipboard with no unit label attached, which is what a spreadsheet cell or a budget config file wants.
Flip the direction for a CI threshold
Going the other way is the same page: type into the kilobyte field, or press the swap button to reverse the two units. Budget tooling usually wants its limits expressed in bytes, so a 170 KB ceiling becomes 170 000 in the config.
Both fields stay editable at all times and the unit menus on either side are searchable, so if a colleague hands you a figure in megabytes or a bit-based transfer rate, you can reach that unit from the same two boxes without leaving the page.
Typical Web Asset Sizes in Bytes and Kilobytes
These are representative transferred sizes for a modern, compressed production build — the kind of figures you would see in the network panel of a well-optimised site. Use them to sanity-check whether an asset in your own build is unusually heavy for its type.
| Asset (as transferred) | Content-Length (bytes) | Kilobytes |
|---|---|---|
| HTML document, brotli | 14 336 | 14.336 KB |
| JSON API response, gzip | 3 600 | 3.6 KB |
| Main stylesheet bundle, brotli | 52 340 | 52.34 KB |
| Framework JavaScript bundle, brotli | 180 224 | 180.224 KB |
| Subset variable font, WOFF2 | 45 000 | 45 KB |
| Hero image, AVIF | 86 016 | 86.016 KB |
Fonts and images are already compressed formats, so a server-side encoder gains almost nothing on them; their byte count on the wire is essentially their byte count on disk. Text assets are where the encoder choice moves the number, and where a budget breach is usually fixable.
Walk a Whole Waterfall in One Sitting
Because the result recalculates on every keystroke, you can work down a network waterfall row by row, replacing the number in the field each time instead of resetting the page.
Tolerant of Pasted Header Values
Values pasted straight out of a terminal or a dashboard often carry spaces or a European decimal comma. Both are handled, so you do not have to clean the string first.
No Round Trip While You Audit
Once the page has loaded, the arithmetic runs in your browser. Auditing a hundred assets costs no network requests of its own — useful when you are watching the very network panel you are measuring.
Page-Weight Budget Questions
Why doesn't Content-Length match the file size on disk?
Because the header describes the body after content encoding. If the server applies brotli or gzip, Content-Length is the size of the compressed payload, which for a text asset is routinely a third or less of the file in your build output. When a response is streamed with chunked transfer encoding, the header is absent altogether and you have to read the transferred size from the browser instead.
Should a budget count compressed or uncompressed kilobytes?
Track both, for different reasons. The compressed size governs download time, so that is the number your network budget should use. The uncompressed size governs parse and execution cost, which matters most for JavaScript on low-end devices. A bundle that compresses beautifully can still block the main thread for a long time after it arrives.
Why do DevTools and my server log disagree about the same response?
They are counting different things. Browser tooling usually shows the transferred size including response headers, while an origin log records the body bytes it emitted. A CDN in front of the origin adds another layer: it may re-encode with a different algorithm or quality level, so the bytes leaving the edge differ from the bytes leaving your server. Decide which measurement point your budget is defined at, then always convert from that one.
Do response headers eat into the budget too?
They are small per response but not free. A typical set of security, caching and CORS headers runs to a few hundred bytes, and cookies sent on every request add to it. Across a page with a hundred subresources that is measurable, which is part of why header compression exists in modern HTTP versions. If you are chasing the last few kilobytes, pruning redundant headers and oversized cookies is a real, if modest, saving.
How should a page-weight budget be split between asset types?
Set a per-type ceiling rather than one lump figure, because a single total lets one team quietly spend everyone else's allowance. A common shape is a tight cap on scripts, a smaller one on styles and fonts, and a generous but enforced cap on images, with the document itself kept small enough that the first response arrives in very few network round trips. Convert each ceiling to bytes when you encode it in the build tool, and keep the KB version in the document people actually read.
No comments yet. Be the first to comment!