All posts
PerformanceCDNTTFB

How to Use a CDN to Speed Up Your Website

A CDN distributes your content to servers around the world, reducing latency for all users. Learn how CDNs work, what they speed up, and how to get started.

debugutils.dev

A Content Delivery Network (CDN) is a distributed network of servers that caches your website’s content in locations around the world. When a user in Sydney requests your site, they get served from a Sydney server instead of your US-based origin — reducing the round-trip time from 200ms to 20ms.

CDNs are one of the highest-ROI performance investments you can make for a global audience.

How CDNs Work

Without a CDN: User → origin server (single location). Every request travels the full distance.

With a CDN: User → nearest edge node (100s of locations globally). The edge node serves cached content or proxies to origin.

The CDN caches static assets (images, CSS, JavaScript) at the edge. For dynamic content, CDNs still help by handling the TCP connection locally and routing the request to origin over optimized network paths.

What CDNs Improve

TTFB — The most direct impact. Assets served from edge nodes respond in 5–30ms vs 50–300ms from origin.

LCP — If your LCP element is an image served via CDN, load time drops proportionally.

Throughput — CDN edge nodes have massive bandwidth. Large files download faster from a nearby edge node.

Reliability — CDNs absorb traffic spikes and DDoS attacks that would overwhelm an origin server.

HTTPS performance — CDNs handle TLS termination at the edge, reducing handshake latency.

What CDNs Don’t Fix

Server-side processing time — If your server takes 1.5 seconds to generate a page, the CDN caches that delay the first time. Enable full-page caching to fix this.

Uncacheable dynamic content — User-specific pages (dashboards, shopping carts) can’t be CDN-cached without special handling. CDNs still help with edge-termination overhead, but the origin roundtrip still happens.

Cloudflare (Free tier available)

The most accessible option. Free tier includes CDN, DDoS protection, and basic performance features. Used by debugutils.dev itself. Easy to set up — change your DNS nameservers and Cloudflare handles the rest. It’s especially popular for WordPress sites.

Pro: Free tier is genuinely useful. Global network. Workers for edge compute. Con: Free tier doesn’t cache HTML by default (you need to configure cache rules).

AWS CloudFront

Tightly integrated with AWS services. Flexible configuration and pricing. Good for sites already on AWS infrastructure.

Fastly

High-performance CDN favored by large-scale applications. Near-instant cache purging. More developer-friendly than Cloudflare for advanced use cases. No meaningful free tier.

Bunny CDN

Affordable, straightforward CDN. Pay-per-use pricing. Good for high-bandwidth static asset delivery.

Vercel / Netlify Edge

Built-in CDN for frontend deployments. If you deploy on Vercel or Netlify, your site already has CDN distribution.

Setting Up Cloudflare (Step by Step)

  1. Create a Cloudflare account and add your domain
  2. Update your domain’s nameservers to Cloudflare’s (at your registrar)
  3. Cloudflare automatically proxies and caches static assets (CSS, JS, images, fonts)
  4. For HTML caching, add a Cache Rule: match all traffic, cache everything
  5. Set cache TTL based on your update frequency
  6. Enable Brotli compression and HTTP/2 in Speed settings

Verify it’s working: Run a test on debugutils.dev and look for cf-cache-status: HIT headers in the waterfall. That confirms Cloudflare is serving the cached response.

Cache-Control Headers

Tell CDNs and browsers how long to cache each asset type:

# Long TTL for hashed assets (auto-versioned filenames)
Cache-Control: public, max-age=31536000, immutable

# Shorter TTL for HTML
Cache-Control: public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400

# No caching for user-specific content
Cache-Control: private, no-cache

The s-maxage directive sets CDN TTL independently from browser cache TTL. stale-while-revalidate lets the CDN serve stale content while refreshing in the background. For a deeper look at caching strategies, see How to Improve TTFB with Caching.

Measuring CDN Impact

Run two tests on debugutils.dev: one before enabling CDN and one after. Look at TTFB on the main document and static assets. The difference is your CDN improvement.

All posts