01The idea
Clients often ask why their site is fast in one city and slow in another. Diagrams of a CDN never quite land, so we made one that moves.
Each dot on the globe is a request. It travels to the nearest edge location; if the answer is cached it comes straight back, and if not it makes the long trip to the origin first.
02How it's built
A worker logs anonymised timings from a test site, and a small WebGL scene replays them on a globe. Hits glow and return quickly; misses arc all the way to the origin and back.
- Real timings from a test deployment, replayed in the browser
- Instanced points, so thousands of requests stay smooth
- Cache rules can be toggled to see the effect live
- Falls back to a flat map when WebGL isn't available
1// replay logged requests as arcs on the globe2for (const req of log) {3 const from = toVec3(req.city)4 const to = req.cacheHit ? toVec3(req.edge) : ORIGIN5 arcs.push({6 from,7 to,8 duration: req.ms * SLOW_MOTION,9 color: req.cacheHit ? HIT : MISS,10 })11}03What we learned
Most of the slow-site complaints we looked at were cache misses caused by a single header. Seeing the arcs made the fix obvious to people who had never read a cache-control rule.
- Show the system, not a diagram of it
- Cache headers are product decisions
- Measure from where your users are, not from your desk
One afternoon of visualising can save a week of arguing about which CDN to buy.
