Building an intuition for file size and network speed

You’ve probably seen those latency-numbers-every-programmer-should-know lists like Vercel’s and Sam Rose’s (really cool, btw) and Jonas Bonér’s (the original, I think). These are good, but I haven’t been able to just sit down one day and internalize the numbers—instead, I’m trying to develop an intuition over time, deliberately.

Observing size and speed

I think it has to be deliberate. You have to actually Stop And Think for a minute to reason about the size of a resource or speed of an operation and its consequence (e.g. load time of your website). At least I think I have to do that to improve my intuition—YMMV, ofc.

I’ve started writing down observations on sizes and speeds when I think of it.

Downloading an offline map

Last year I wrote a thought stream about downloading a 30MB map in the woods.

Downloading a podcast on my phone

A podcast on my iPhone takes up about 1MB per minute. E.g. this ~30m syntax.fm episode on Hono that I downloaded for a flight the other week uses ~28MB.

The Apple Podcasts app itself takes up 12.5MB. Apple’s default audio format is .aac, which is the higher-quality successor to .mp3.

Installing a MacOS desktop app

I recently downloaded the onlook.dev desktop app (very cool project), and I noticed that the version I downloaded is 290MB. Compare to VS Code at 594MB, Cursor (445MB), Figma (251MB), and Slack (277MB).

The biggest desktop application I have is Chrome at 1.81GB, closely followed by Docker (1.69GB), then a country mile before any others (all <1GB). Firefox, Brave, Arc, and Safari combined are smaller than Chrome. It’s a little unfair to include Safari because it’s only 13MB on my Mac, borrowing much of its core functionality from the OS, apparently.

Installing a font

I downloaded Commit Mono a couple months ago to use in my editor (highly recommend, btw). The .ttf variable font file is 281KB, the .woff2 variable font file is 87KB, and each .otf variant (e.g. 400 Regular, 600 Italic) is ~275KB.

WOFF fonts are OTF or TTF fonts tailored for the Web (read: compressed). Variable fonts store an entire typeface in one file and are flexible on multiple axes (e.g. thin to bold, regular to italic).

Loading this website

I took a look at petemillspaugh.com/weeks-of-your-life as an example. The long straw on the homepage is 140KB of JavaScript for my React app, plus another 46KB and 30KB for the React library and Next.js framework.

The HTML document is 43KB. I load three fonts (serif + sans + monospace, which in this moment feels a bit gratuitous) around ~40KB each. My pagefind search bundle is 10KB.

Inspecting npm packages

pkg-size.dev is one of my favorite does-one-thing-really-well websites. I like to test npm packages there before adding them to a project. E.g. this website uses styled-components, but I’d like to switch over to CSS modules.

styled-components and its direct dependencies are 3.8MB unpacked, excluding peer dependencies like react, and 36KB minified and 14KB over the wire (gzip).

Running network speed tests

speed.cloudflare.com is my favorite Internet speed test tool. It goes way beyond sharing download and upload speed. I particularly appreciate the explanations of each measurement (hover over the info icons to see tooltips).

Testing the limit of a URL

Last year I was curious and wrote about URL character limits.

Converting .mov to .mp4

I sent an email with a video attachment recently, and gmail thwarted my first attempt because the file was too large. I converted the .mov screen recording to .mp4 with ffmpeg, and the MP4 was about 90% smaller!

I just tested this again, and a 15 second screen recording of me clicking around on Wikipedia is ~30MB as a QuickTime file (.mov) and ~4MB as an MP4. It sounds like QuickTime is specifically designed for editing within the Apple ecosystem whereas MP4 is suited for sharing and streaming with its superior compression.

Comparing .mp4 to .gif

I also recently compared an .mp4 screen recording for a Membrane changelog to its .gif counterpart, out of curiosity. Not only was the MP4 5x smaller, it was way more crisp.

A GIF version of that 15s recording I mentioned is 17MB. I think a GIF is basically a series of frames played in rapid succession like a flip book or Wallace & Gromit stop-motion. MP4 supports sound and more colors and uses modern compression.

As far as I can tell from a cursory search, GIFs are still so common because they are older (read: universally supported) and simpler (auto loop, no controls). Plus, it’s probably good for society to keep the “ghif” versus “jif” debate going.

Comparing .png to .mp4

One more observation from another changelog: a nine second MP4 screen recording was 270 KB, barely more than some of the PNG screenshots in that same blog post.

I think the explanation is that PNG is lossless whereas MP4 uses a bunch of clever compression tricks, only storing what actually changes across frames. We should really be using WebP (which Next.js handles by default) for those images, anyway.

Why observe

I’m interested in recording these observations because (1) it’s just interesting, but also (2) I think small decisions can add up. Like:

• Local font versus web font versus browser default
• Font file format
• Image and video formats
• CSS-in-JS framework versus CSS modules
• Animation libraries like react-spring and framer-motion
• SSR versus CSR versus ISR versus streaming SSR etc.
• SQLite on your app server versus a separate database server

I really liked this Notion blog post on using WASM SQLite in the browser. An intuition for file size allows you to confidently make observations like this, from the blog post:

Why was it slower? Because users had to download and process the WASM SQLite library, which blocked the page load process, preventing other page load operations from happening concurrently. Since this library is a few hundred kilobytes, the extra time was noticeable in our metrics.

(milli)second nature

I get the sense that grokking sizes and speeds is second nature for some programmers. When I started learning to code a few years ago, I realized I had an embarrassingly bad gauge for file sizes and network speeds.

Maybe I missed it because I only became interested in computers and programming in the 2020s when disk space and bandwith are not scarce (on my machine and where I live, at least). Maybe I missed it because I didn’t study Computer Science. Maybe I missed it because I’m not a gamer (I imagine gamers waiting for big games to download and noticing when their network connection can’t keep up while playing).

Or maybe I’m just not observant and don’t have a knack for it. Or maybe grokking sizes and speeds is not second nature for most programmers.