Skip to content

Goldenboy

Goldenboy · Reading · 01

Single-file websites

One HTML document that carries its own markup, styles, scripts and imagery, and fetches nothing at runtime. Here is what that means precisely, how to check it yourself, and where the format is the wrong choice.

01The definition

A single-file website is one HTML document that carries everything it needs inside itself: markup, styles, scripts, geometry, textures and fonts, with no <script src>, no <link rel=stylesheet>, no CDN and no font host. Open it and the browser has already received the entire site. Nothing is fetched afterwards, so there is no waterfall, no second round trip, and no request that can fail or be blocked.

The word that matters is self-contained, not small. Both objects sold here are larger than a typical HTML file and make exactly zero requests after the document arrives — which is the trade a single-file page makes: one bigger response instead of many small ones.

02How to verify it yourself

Do not take a seller's word for it, including ours. Two checks settle it in under a minute, and they work on any file from anyone.

First, grep the document for outbound references. A truly self-contained file returns zero:

grep -oE '(src|href)="https?:[^"]*"' page.html | wc -l
# 0

Second, open the file from disk with devtools' network panel recording and reload. Count the requests. One document request, nothing else. If the page renders identically with the network disabled, it is self-contained — and if it does not, something in it was never really inside it.

Specimen 01 does both checks for you in the browser, on any file you drop on it, without uploading anything anywhere. It is free.

03What it buys you

04What it costs you — honestly

The honest boundary: a single file is the right shape for a finished page — a launch, a portfolio, a campaign centrepiece, a signature page. It is the wrong shape for an application with accounts, data, or an editorial calendar.

05Measured, from the files we actually deliver

These are the two objects on sale. The figures are taken from the delivered documents with stat and gzip -9, not estimated, and re-measured whenever an object is re-cut.

Object 01 · The Agent Chronometer — on disk
704,811 bytes
Object 01 — over the wire
187,269 bytes gzipped
Object 01 — runtime requests
0
Object 01 — renderer
Three.js r185, inlined into the document
Object 02 · Visage — on disk
548,530 bytes
Object 02 — over the wire
403,717 bytes gzipped
Object 02 — runtime requests
0

For scale: 187,269 gzipped bytes is the weight of a fairly ordinary JavaScript bundle on a modern marketing site — except that here it is the entire site, arriving in one request, with nothing following it.

06How you publish one

The workflow side of this — editing one, and why there is no build step to run — is its own page.

FAQQuestions

Is a 700 KB HTML file slow?
It arrives as 187,269 bytes gzipped in a single request, and then nothing else is requested at all. A conventional page of comparable ambition typically ships a similar amount of JavaScript plus a request waterfall of fonts, textures and third-party scripts on top of it.
Does it work offline?
Yes. Because there are zero runtime requests, the document renders identically opened straight from disk over file:// with no network at all.
Can I put it inside a site I already have?
Yes — either as a standalone route served from your public directory, or inside an iframe with an accessible title and a deliberately sized container. Nothing about it needs to know what framework the rest of the site uses.
How do I know a file is really self-contained?
Grep it for src= and href= references beginning with http, which should return zero, then reload it with the network panel recording and confirm the document is the only request. Specimen 01 on this site performs both checks in the browser on any file you give it.