cost ledger

common web decisions, measured in kilobytes transferred to strangers who did not ask

Transfer size, not uncompressed. Measured on a clean load with no cache. The cost is paid by the user on every first visit — often on mobile, often on congested networks, always without being told.

React 45kb

what it is: a virtual DOM diffing library

verdict: unnecessary if your page doesn't update after load

alternative: HTML

Google Fonts (1 family, 2 weights) 120–180kb

what it is: different letterforms

verdict: system-ui exists. it loads in 0ms. it cost you nothing.

alternative: font-family: system-ui

Tailwind CDN (play.tailwindcss.com method) ~350kb

what it is: a CSS utility class generator running in the browser

verdict: the build-time version purges unused classes. the CDN does not.

alternative: PostCSS build step, ~8kb output

Framer Motion (basic) 108kb

what it is: animation

verdict: CSS transitions ship with the browser. they are free.

alternative: transition: opacity 0.2s ease

Moment.js 67kb

what it is: date formatting

verdict: Intl.DateTimeFormat ships in every modern browser since 2012.

alternative: new Intl.DateTimeFormat()

Lodash (full bundle) 72kb

what it is: utility functions

verdict: Array.prototype has map, filter, reduce, find. they ship with the engine.

alternative: Array.prototype.*

Axios 13kb

what it is: HTTP requests

verdict: fetch() is in every browser. has been since 2015.

alternative: fetch()

Cookie consent banner 15–60kb

what it is: a legal compliance overlay

verdict: the script that collects data requiring consent loads before the banner asking for it.

alternative: don't collect the data

Sentry (browser SDK) 40kb

what it is: error tracking

verdict: window.onerror ships with the browser. one line. free.

alternative: window.onerror = (msg, src, line) => report(msg, src, line)

Bootstrap 5 (CSS only) 22kb

what it is: a grid system and component defaults

verdict: CSS grid shipped in 2017. flex shipped in 2015. you have a grid.

alternative: display: grid / display: flex

hero-section background video (autoplay, muted) 2,000–8,000kb

what it is: ambiance

verdict: no user asked for this. the video plays behind text. the text is what they came for.

alternative: background-color

Stripe Elements 200kb+

what it is: a payment form

verdict: justified. fraud prevention and PCI compliance require code. this byte load earns its keep.

alternative: (none — this one is fair)

Approximate unjustified transfer from the above decisions if all were made at once: ~2,852kb. This is a conservative estimate. Most production apps exceed it.

methodology

These numbers were measured by loading pages that make each choice in isolation, reading the network tab, and writing down what appeared. The numbers will drift as libraries release versions. The argument does not depend on exact figures — it depends on the existence of alternatives that cost zero.

what this page costs

This page uses system fonts, no JavaScript, and inline styles via Tailwind build output. The <details> elements are interactive without script. Estimated transfer: under 6kb.

You are currently reading this. It loaded.