Why it matters
A budget like "200 KB of JavaScript" is easy to set and hard to feel. What it costs depends on round trips as much as bytes: every new origin needs DNS, TCP and TLS before a byte moves, TCP starts slowly and speeds up each round trip, a font isn't requested until its stylesheet arrives, and a blocking script has to download and run before anything paints. On a phone over 4G those add up to seconds.
This simulator plays a page load in 2 ms steps with those rules. It opens connections per origin, grows each congestion window, shares the bandwidth, discovers each resource when its parent arrives, runs scripts on one main thread, and estimates First Contentful Paint and Largest Contentful Paint for four standard networks. Flip the what-if switches to see what deferring scripts, preloading the hero image or compressing text would save before you build it. It's a model with its constants written down, so use it to compare options; Lighthouse and field data measure the real thing.
How it works
- InputA resource list or HAR file
- In your browserRound trips, slow start, priorities and the main thread, simulated
- OutputFCP and LCP per network, with what-ifs
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Network | FCP | LCP | FCP after fixes | LCP after fixes |
|---|---|---|---|---|
| Slow 3G | 9.59 s | 13.76 s | 3.14 s | 9.32 s |
| Slow 4G | 3.00 s | 3.88 s | 1.29 s | 2.64 s |
| Fast 4G | 1.28 s | 1.28 s | 0.67 s | 0.79 s |
| Cable / fibre | 0.91 s | 0.91 s | 0.41 s | 0.42 s |
How to use it
- List each resource with its type and transferred size, or paste a HAR file from DevTools.
- Mark render-blocking files, the LCP image, and anything found by CSS or a script.
- Set your FCP and LCP budgets and pick a network and device.
- Read the critical path, then try the what-if switches.
FAQ
How accurate is it?
It's a model, not a measurement. It leaves out layout, image decoding beyond a small allowance, server variation and third-party work, so real numbers are usually a little slower. It's best for comparing options on the same page.
What are the network profiles?
The throttling presets Chrome DevTools and Lighthouse use: Slow 3G (400 kbps, 400 ms round trip), Slow 4G (1.6 Mbps, 150 ms, Lighthouse's mobile setting), Fast 4G (9 Mbps, 60 ms) and a 50 Mbps, 20 ms fixed line.
Why does a new domain cost so much?
Each origin needs a DNS lookup, a TCP handshake and a TLS handshake before the first request: three round trips here, 450 ms on Slow 4G. Fewer origins, or preconnect hints, avoid it.
How is JavaScript cost worked out?
From uncompressed size (transferred size times 3.3 for compressed files) at 0.25 ms per KB on desktop, 1 ms on a mid-range phone (Lighthouse's 4x CPU slowdown) and 2 ms on a low-end phone.
Can I use a HAR file?
Yes. Paste it and the table is built from its requests: CSS and first-party scripts are treated as blocking, the largest image as the LCP element. Check and edit those guesses.
