Colophon
How this site is built
The site is a receipt too, written the way the work is: the problem, the approach, the outcome, and what it cost me.
Built
Problem
A consultant’s website has a few seconds to persuade a founder, often on a phone, often on a bad connection. Mine had a harder brief: it had to prove the thing it sells. If I say good engineering decisions are visible, measurable, and honest about their cost, the site I say it on had better be all three.
Approach
Five decisions, each one written down before it was built.
- Static by default.
- Every page is built once and served from Cloudflare’s cache. Nothing renders on request, so there’s nothing to slow down or break.
- Budgets are gates.
- Weight, speed, layout shift, and accessibility are measured on every build. A page that breaks a budget doesn’t ship.
- One design system.
- Every colour and size is a named role, written down before it’s used. Colour carries meaning here, so it can’t be swapped on a whim.
- Motion is a bonus.
- With JavaScript off, or reduced motion on, every word is still there. The motion switches itself off if it hasn’t started within three seconds.
- Readable by machines.
- Structured data, an llms.txt, and a robots.txt that explains its reasoning, so an assistant can describe the work accurately.
Outcome
The numbers below come from the build that made this page, page by page.
| Page | Performance | Accessibility | LCP, mobile | Layout shift | Weight |
|---|---|---|---|---|---|
| / | 100 | 96 | 1.41 s | 0 | 135 KB |
| /another-way/ | 100 | 100 | 1.37 s | 0 | 76 KB |
| /work/ | 100 | 100 | 1.52 s | 0 | 88 KB |
| /profile/ | 100 | 100 | 1.40 s | 0 | 91 KB |
| /desk/ | 100 | 100 | 1.22 s | 0 | 63 KB |
| /contact/ | 100 | 100 | 1.21 s | 0 | 53 KB |
| Budget | ≥ 95 | 100 | none | ≤ 0.05 | ≤ 600 KB |
Lighthouse, mobile profile, on the production build of 4 November 2026. First-party JavaScript: 4 KB of a 15 KB budget. Accessibility is under 100 only on the home page, where Lighthouse counts the gold on cream as low contrast; that gold is a choice I made and registered, not an oversight, and a stricter test checks every word of it.
Every number here was measured by the build that made this page. If one breaks its budget, the page doesn’t ship.
What it cost me
The fonts. The heaviest thing on any page is the type. Söhne Breit and Signifier are licensed from Klim and cut down to the characters I use, and they still weigh more than all of my code put together: around 105 KB against 4 KB. I keep them because the type is the voice; a free face would have made this look like everyone else’s site.
Two bent budgets. Layout shift has a budget of 0.05, and five archived articles are allowed 0.15. Their long headlines can wrap differently in the fallback face than in the real one, so the page moves when the font arrives. I chose to keep fonts on swap, so a reader on a slow connection gets words first, and I registered the exception rather than hide it. The home page’s accessibility is held to 96 rather than 100 for the same reason: its gold stays, and the exception is written down.
Scripts I didn’t write, kept on purpose. Not every byte here is mine. Cloudflare hides my email address from scrapers and screens bots in front of the site, and that costs about 18 KB of someone else’s JavaScript, more than twice my own. It costs points on Lighthouse’s Best Practices, and without JavaScript my address reads as “[email protected]”. Less spam is worth it to me, for now.