Where most of you actually are.
About seventy per cent of the traffic to a site like this arrives on a phone, frequently on a bad connection, frequently in a queue for something else. The walk was built for that first and widened afterwards.
What we cut, and what we refused to cut.
The frame sequence drops from twelve plates to six on a small screen and a slow connection. That is the single biggest saving available and nobody has ever noticed it happening.
What does not get cut is the writing. Every stop carries the same words on a phone as on a desktop, because the assumption that a small screen means a short attention span is both insulting and wrong. People read more on phones than anywhere else. They just do it in worse circumstances.
What also does not get cut is the numbers. If a cost table is worth having on a laptop it is worth having in a doctor’s waiting room, and it scrolls horizontally inside its own box rather than making the whole page slide sideways.
What the walk weighs.
The first screen
- HTML
- About 34 KBBefore compression.
- Critical CSS
- InlinedOne request saved, which on 3G is worth more than it sounds.
- Fonts
- Self-hosted, two weightsNo third-party request, ever.
- JavaScript before first paint
- NoneThe page renders without it and then improves.
- First plate
- About 40 KBAn SVG, which scales without a second file.
The frame sequence
- Frames, large screen
- 12
- Frames, small or slow
- 6Chosen on connection, not on screen width alone.
- Preloaded
- The first two only
- Under reduced motion
- One plateAnd the caption that carries the same information.
- Total, worst case
- Under 500 KBFor the whole opening sequence.
Figures are for this build, measured on the preview render rather than estimated.
The four decisions that made it work on a bad connection.
No third-party anything
No fonts from a font host, no analytics, no tag manager, no embedded player. Every request on this page goes to one server.
SVG plates rather than photographs
A screen-printed illustration is a few kilobytes and scales to any screen without a second file. A photograph is neither of those things.
Render first, enhance after
The page is readable before a single line of JavaScript has run. The scrubbing, the reveals and the pinning are improvements to something that already worked.
Nothing sideways
Wide tables and diagrams scroll inside their own box. The page itself never scrolls horizontally, on any device, at any zoom.
What happens as the connection gets worse.
| Connection | Frames | Plates | What you lose |
|---|---|---|---|
| Wifi or 5G | 12 | Full | Nothing |
| 4G | 12 | Full | Nothing, but the sequence loads as you scroll |
| 3G | 6 | Full | Half the frames, which nobody has ever mentioned |
| Slow 2G | 1 | Full | The sequence becomes a single plate and a caption |
| Data saver on | 1 | Full | The same, by choice rather than by measurement |
| No JavaScript | 1 | Full | Every word, number and link still works |
Four things about the phone build.
Built small first
And widened, rather than the other way round.
No third parties
Every request on this page goes to one server.
Nothing shortened
The same words on a phone as on a desktop.
Works without JS
Every word, number and link.
The questions about the small version.
No, and there is not going to be. An app is a thing you have to persuade somebody to install before you can show them a hedge.
Partly. Pages you have already opened stay readable, because the plates and the type are cached. A stop you have not visited will not appear from nowhere.
The accessibility work, which overlaps with all of this.
A keyboard path, described audio, and full parity under reduced motion.
