The Power of CDNs: Moving Your Content Closer to the User

Every millisecond your data spends traveling across the globe is a millisecond your user spends waiting. A Content Delivery Network (CDN) solves this by placing copies of your content on servers worldwide, so users always load from the nearest location.

How a CDN Works

Without a CDN:

User (Sydney) → Origin Server (Virginia) = ~300ms round trip

With a CDN:

User (Sydney) → CDN Edge (Sydney) = ~20ms round trip

The CDN Process

1. User requests your page
2. DNS routes the request to the nearest CDN edge location
3. If the edge has a cached copy → serve it instantly (cache hit)
4. If not → fetch from origin, cache it, serve to user (cache miss)
5. Subsequent requests from that region → served from cache

CDN Impact on Key Metrics

Metric	Without CDN	With CDN	Improvement
TTFB	200-500ms	20-50ms	75-90%
FCP	2-4s	1-2s	50%
LCP	3-5s	1.5-2.5s	40-50%
Lighthouse	50-70	75-90	+20-30 points

Types of CDN Caching

Static Asset Caching

CSS, JavaScript, images, fonts — files that don't change between requests. Set long cache headers:

Cache-Control: public, max-age=31536000, immutable

Page Caching

Full HTML pages cached at the edge. Great for pages that don't change frequently (marketing pages, blog posts):

Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400

Dynamic Content at the Edge

Modern CDNs can run code at the edge to personalize content without hitting the origin:

• Cloudflare Workers
• Vercel Edge Functions
• AWS Lambda@Edge

Setting Up a CDN

Option 1: Cloudflare (Free Tier)

The easiest and most popular option:

1. Sign up at cloudflare.com
2. Add your domain
3. Change your nameservers to Cloudflare's
4. Enable "Auto Minify" and "Brotli compression"
5. Set up Page Rules for caching

Time to set up: 15-30 minutes. Cost: Free.

Option 2: Deploy to a CDN-Native Platform

Platforms that include CDN by default:

• Vercel — automatic edge caching for Next.js
• Netlify — CDN for static and server-rendered sites
• Cloudflare Pages — full-stack with Workers
• AWS Amplify — CloudFront CDN included

Option 3: Dedicated CDN

For more control:

• AWS CloudFront — most edge locations
• Fastly — real-time purging, Varnish-based
• Bunny.net — affordable, great performance
• KeyCDN — simple pricing, good for media-heavy sites

CDN Configuration Best Practices

Cache Headers

Set appropriate cache durations:

# Static assets (hashed filenames)
Cache-Control: public, max-age=31536000, immutable

# HTML pages
Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400

# API responses
Cache-Control: private, no-cache

# User-specific content
Cache-Control: private, no-store

Cache Invalidation

When you update content, you need to clear the CDN cache:

• Hashed filenames — app.abc123.js → new hash on change, no purge needed
• API purge — most CDNs offer programmatic cache clearing
• Cache tags — tag content and purge by tag
• Low TTL — use short cache times (5-60 min) for frequently changing content

Compression

Enable Brotli compression (15-25% better than Gzip):

• Cloudflare: Enabled by default
• AWS CloudFront: Configure in distribution settings
• Nginx: brotli on; brotli_types text/css application/javascript;

Common CDN Mistakes

1. Not Caching HTML

Many sites only CDN-cache static assets but serve HTML from the origin. The HTML request is often the slowest — cache it too.

2. Cache-Busting on Every Deploy

If every deploy invalidates the entire cache, you lose the CDN benefit. Use content-addressed (hashed) filenames for assets.

3. Ignoring Cache Hit Rate

Monitor your cache hit ratio. Below 80% means most requests still hit your origin:

Cache Hit Rate = Cache Hits / (Cache Hits + Cache Misses) × 100

4. Not Using a CDN for Images

Images are your heaviest assets. Serve them from the CDN, not directly from your server or CMS.

Measuring CDN Impact

After enabling a CDN, verify the improvement:

1. Run PageSpeed Insights — check TTFB and LCP
2. Run WebPageTest from multiple locations
3. Check CDN analytics for cache hit rate
4. Compare before/after Lighthouse scores

Monitor Your CDN Performance

A CDN misconfiguration can silently serve stale content or bypass caching entirely. Monitor continuously.

Track your performance with BadPageSpeed →