How this one is made.

Anybody can say a site is fast. These are taken from the browser you are reading this in, right now, which means they are also a little different for you than they are for me, and that is the honest version.

Came down the wire

—KB

Everything this document needed, compressed, as the browser counted it.

First paint

—ms

From the request leaving to the first thing you could see.

Ready to use

—ms

From the request leaving to the document being interactive.

Animation frames

—

How many separate animation loops are running. The answer should be one.

Elements on the page

—

The whole document, counted.

Style rules

—

Every rule in the stylesheet, whether this page uses it or not.

Systems running

—

Independent pieces of behaviour that woke up on this page.

Frames per second

—

Sampled over one second while you were looking at this.

If any of these look bad on your machine, that is useful and I would like to know. The figures come from the browser's own timing interface, so nothing here is sent anywhere.

Three faces, each doing one job, which is two fewer than most sites use and about right. Every line below is set in the face it describes.

Colour is four values and one rule: anything that has to be read uses the darkened companion rather than the mark itself.

No framework, no build step, no component library. One stylesheet and one script, both written by hand, on ordinary shared hosting, edited from an admin screen so the words can change without anybody touching code.

Structure

Hand written markup, one document per page, rendered whole on the server before it reaches you.

Style

One stylesheet. Custom properties for the palette, a token for any colour that carries text, and a dark theme that is a redefinition rather than a second set of rules.

Behaviour

One script, no dependencies. Every system is isolated, so a broken one steps aside quietly instead of taking the page with it.

Motion

One animation frame shared by every moving thing on the page, and layout measurements cached rather than read inside it.

Type

Three faces, loaded once, with a real fallback stack so the page is readable before they arrive.

Sound

Generated in the browser rather than downloaded, off by default, and it remembers that you turned it off.

Storage

Anything you do here stays in your own browser. Nothing is collected and there is nowhere for it to go.

Editing

Every word on this site is a field on an admin screen. Nothing in the writing requires a developer.

The reason for doing it this way is not purity. It is that I have to maintain it on a weekday evening in two years, and every dependency is a thing that can rot while I am not looking.