OneTaskBy Tim King · Updated
JavaScript Size Calculator
Gzipped Bundle Size, Download Time on 3G and Phone Parse Time
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the JavaScript Size Calculator works
This JavaScript size calculator shows the cost of a script. JavaScript is the most expensive thing a page can ship, byte for byte, because the browser has to download it, then parse and compile it, then run it — all on the same main thread that handles taps and scrolls. Paste a script to see its minified and gzipped size and how long each of those stages takes on a mobile connection and a mid-range phone, or just enter the size from your build output if you only have the number.
JavaScript size calculator: bytes and parse time
An image that is 300 KB costs 300 KB of bandwidth and a little decode time. A script that is 300 KB compressed costs the same bandwidth and then roughly a megabyte of source that the engine has to tokenise, parse, compile and execute before any of it does anything. On a laptop that is a few hundred milliseconds. On the mid-range Android phone that most of the world browses on, the CPU is four to six times slower, so it is over a second — during which the page is visible but ignores input. That gap is what Total Blocking Time and Interaction to Next Paint measure, and JavaScript size is the number most directly behind both.
The figures. The calculator strips comments and whitespace to approximate a minifier, then gzips the result in the browser with the CompressionStream API to get the real transfer size. Download time divides that by the throughput of each connection profile. Parse time is an estimate at about 1.2 ms per KB of source on a fast device, multiplied by four for a mid-range phone; real numbers vary with the code's shape, but the order of magnitude is right, and it is the uncompressed size that drives it, not the gzipped one. If you enter a size instead of pasting, gzip is assumed at a 3:1 ratio, which is typical for minified bundles.
The 170 KB budget. The commonly cited guideline is to keep the JavaScript needed for the
initial route under about 170 KB compressed, which is roughly what a slow 4G connection and a
mid-range phone can download and process in three to five seconds. Frameworks alone can take
a third of that. Where the budget is blown, the fixes are the same every time: split the bundle by
route so each page loads only its own code; load anything below the fold or behind a click with
dynamic import(); check what tree-shaking left behind with a bundle analyser; and move analytics,
chat widgets and other third-party scripts off the critical path with defer or a delayed load.
Import counts. When you paste a source file rather than a built bundle, the import count shows how much of the size is actually pulled in from elsewhere; a small file with thirty imports can produce a very large bundle. The bundle analyser plugin for your build tool shows the real composition.
FAQ
Should I measure the source file or the built bundle?
The built bundle is what users receive, so measure that when you can. Pasting a source file is
useful for comparing implementation choices before building, but it misses the dependencies that
import pulls in.
Why is parse time based on the uncompressed size?
Because the browser decompresses the file before the engine sees it. Gzip saves download time only; every byte of source still has to be tokenised and compiled, which is why a 100 KB compressed bundle of dense minified code is far more expensive than a 100 KB image.
Does `defer` or `async` make the script cheaper?
It moves the cost, which is often enough. A deferred script still downloads and parses, but it no longer blocks the parser from building the page, so first paint happens earlier. The main-thread work is unchanged, so Total Blocking Time may not improve until you actually ship less code.
How accurate is the gzip figure?
Exact for what you pasted, since it is real gzip output. Servers using Brotli will send 10 to 20 percent less; the Gzip / Brotli Size Comparison tool shows both.
What about the code's execution time?
Not estimated here, because it depends entirely on what the code does. Parse and compile is the predictable floor; execution can be anything from nothing to several seconds for a heavy framework hydration. The Performance panel in the browser shows the real breakdown.
See also: all Dev Utilities tools, Formatters & Validators, Data & Encoding, Security & Identifiers, SEO, Accessibility, AI.
Related tools
CSS Size Calculator
Measure a stylesheet's real transfer size and see whether it blocks first paint.
Gzip / Brotli Size Comparison
Compare what gzip and Brotli save on a real file.
Page Weight Calculator
Add up page resources, see the breakdown and load time on each connection.
JavaScript Formatter
Expand minified JavaScript into indented code, or squash it back.
Performance Budget Calculator
Turn a load-time target into a byte budget for each part of the page.