What a CDN actually moves

Three senior courses in this series have pointed here. "Database: multi-region strategy" measured the distance, "Kamal proxy: Thruster" measured the thread cost, and "System Design: load balancing layer 7" named the edge as the place to route to. This course follows through.

The problem, restated

A visitor in Mumbai is roughly 200 milliseconds away from a server in the eastern United States, and no amount of server optimization changes that.

A first visit fetches the HTML, two stylesheets and a few dozen preloaded JavaScript modules. Each one that isn't already in the browser's cache is a request that has to be answered from somewhere.

The HTML must come from the origin, because it's generated per request. Everything else needn't.

What a CDN is

A CDN is copies of your files on machines near your users, with a rule for when a copy may be served instead of asking you.

It moves bytes, not computation. A CDN can't run your Rails code; it can only hold what that code produced earlier.

So the question for any response is whether it was produced for everyone, or for this person. Everything else follows.

flowchart TB
  R["a response"] --> Q{"produced for everyone, or for this person?"}
  Q -->|everyone| C["cacheable at the edge"]
  Q -->|this person| O["must come from the origin"]
  C --> A["assets, fonts, public images"]
  O --> H["the roadmap page, the dashboard, anything signed in"]

What this application moves

tailwind.css is about 105 KB uncompressed, the largest single thing a first-time visitor downloads from this origin.

Add lexxy.css and the locally served JavaScript modules that Propshaft fingerprints, and that's the application's own asset surface.

Where the CDN already is

Fonts come from fonts.bunny.net, and some JavaScript comes from cdn.jsdelivr.net. Those were edge-delivered from the start.

The application's own assets now are too. Cloudflare sits in front of the whole domain, and it caches /assets at its edge: a request for the stylesheet reports cf-cache-status: HIT. Because Cloudflare answers on the same hostname, nothing in the application had to change.

So this course explains why that's safe, what must never be cached at the edge, and what's left, which is the HTML. Naming the opportunity precisely is what makes the next five lessons tractable.

Key takeaways

• A CDN moves bytes closer, and it can't move computation.
• The question for any response is whether it was produced for everyone or for one person.
• The HTML must come from the origin, and the assets needn't.
• tailwind.css, at about 105 KB, is the largest thing this origin sends a first-time visitor.
• Fonts and some JavaScript were always edge-delivered, and Cloudflare now caches the application's own assets too.