The Franchise Analogy
Getting coffee:
One store (downtown):
- 30 minute drive from suburbs
- Long wait in line
- Slow coffee
Franchise locations:
- Store in every neighborhood
- Close by
- Fast coffee
CDN is a franchise for your content. Copies stored worldwide, served from nearest location.
What Is a CDN?
CDN = Content Delivery Network
Network of servers distributed globally.
Each server (edge) has copies of your content.
User gets content from nearest edge.
Without CDN:
User in Tokyo → Your server in New York (noticeable latency)
With CDN:
User in Tokyo → CDN edge in Tokyo (much lower latency)
How It Works
┌────────────┐
│ Origin │ (Your server)
│ Server │
└─────┬──────┘
│
(Content distributed to edges)
│
┌────────┼────────┐────────┐
│ │ │ │
▼ ▼ ▼ ▼
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│ Edge │ │ Edge │ │ Edge │ │ Edge │
│ NYC │ │ LON │ │ TOK │ │ SYD │
└──────┘ └──────┘ └──────┘ └──────┘
User in London → Edge in London
User in Sydney → Edge in Sydney
What CDNs Cache
Static Content
✓ Images (jpg, png, webp)
✓ CSS files
✓ JavaScript files
✓ Videos
✓ Fonts
✓ PDFs and downloads
Doesn't change often.
Cache for a long time.
Dynamic Content
API responses (with caution)
Personalized content (more complex)
Shorter cache times.
Or: Edge compute to generate at edge.
Benefits
1. Faster Load Times
Content served from nearby.
Less distance = Less latency.
Result: pages often load noticeably faster
2. Reduced Origin Load
CDN handles most requests.
Origin typically gets fewer requests (for cache misses, uncached paths, or revalidation).
Origin: 1M requests → 10K requests
3. Higher Availability
Origin goes down?
CDN serves cached content.
Users still get data.
4. DDoS Protection
Attack traffic hits CDN edges.
Distributed across network.
Origin protected.
5. Cost Savings
Less bandwidth from origin.
CDN bandwidth often cheaper.
Less server capacity needed.
CDN Caching
Cache Headers
Server tells CDN how long to cache:
Cache-Control: max-age=<seconds>
(Cache for a day)
Cache-Control: public, max-age=<seconds>
(Cache for a year, sharable)
Cache-Control: no-store
(Don't cache)
Cache Invalidation
Content updated on origin.
CDN still has old version!
Solutions:
- Purge: Tell CDN to delete cached version
- TTL expiry: Wait for cache to expire
- Versioned URLs: /style.v2.css (new URL = no old cache)
Popular CDN Providers
| Provider | Specialty |
|---|---|
| Cloudflare | Free tier, security |
| Akamai | Enterprise, market leader |
| AWS CloudFront | AWS integration |
| Fastly | Real-time configuration |
| Google Cloud CDN | GCP integration |
| Vercel/Netlify | Static sites, JAMstack |
Edge Computing
Modern CDNs do more than cache.
Run code at the edge!
- Personalization
- A/B testing
- API routing
- Authentication
Called: Cloudflare Workers, Lambda@Edge, etc.
Processing happens near user.
Setting Up a CDN
DNS Method
Point your domain to CDN:
www.example.com → CDN
CDN → Your origin server
CDN handles all requests.
Pull vs Push
Pull CDN:
CDN fetches from origin when needed.
Most common.
Push CDN:
You upload content to CDN.
For large files, predictable content.
Common Mistakes
1. Wrong Cache Headers
No cache headers = CDN doesn't cache.
Or opposite: caching user-specific data!
Set appropriate Cache-Control headers.
2. Not Invalidating After Deploy
New code deployed.
CDN still serves old JavaScript.
Bugs that were fixed appear unfixed!
Purge cache or use versioned URLs.
3. Caching Errors
Origin returns 500 error.
CDN caches the error page!
All users see error.
Don't cache error responses.
4. Ignoring CORS
Fonts or APIs from CDN subdomain.
Browser blocks due to CORS.
Configure proper CORS headers.
FAQ
Q: Do I need a CDN for small sites?
Even small sites benefit from CDN speed and protection. Many free tiers available.
Q: Does CDN work with HTTPS?
Yes! CDN can handle SSL termination. Often simpler certificate management.
Q: What about dynamic API content?
Can cache with short TTL, or use edge computing. Or proxy through CDN without caching.
Q: How do I know if CDN is working?
Check response headers (via browser dev tools): x-cache: HIT means CDN served it.
Summary
CDN distributes content to edge servers worldwide, serving users from the nearest location for faster load times.
Key Takeaways:
- Content replicated to edge servers globally
- Users served from nearest edge
- Faster load times, reduced origin load
- Set Cache-Control headers properly
- Invalidate cache after deploys
- Modern CDNs offer edge computing
- DDoS protection built in
CDN makes your content feel local everywhere in the world!
Related Concepts
Leave a Comment
Comments (0)
Be the first to comment on this concept.
Comments are approved automatically.