Complete website CDN setup guide: from basics to advanced optimization

Complete website CDN setup guide: from basics to advanced optimization

CDN (Content Delivery Network) is the infrastructure modern websites can't do without. It caches static assets on edge nodes spread across the globe, serves them from the node closest to each visitor, and fronts your domain with value-added capabilities like DDoS protection, SSL certificates, and security rules.

What happens when a request goes through a CDN

Take a cover image as an example. When a user first requests https://example.com/images/cover.webp, the edge node finds no local copy (a cache miss), fetches the file from your origin server, stores it, and returns it to the user. The next visitor in the same city gets a cache hit and never touches your origin. Once your static-asset hit ratio passes 90%, origin load drops sharply, and even a brief origin outage won't take your cached content offline.

Two numbers are worth tracking long-term: cache hit ratio and origin offload rate. The higher the hit ratio, the fewer requests reach your origin, and the lower your bandwidth and origin load. Caching strategy is exactly what controls those two numbers.

CDN provider comparison

Among the options here, Cloudflare's free tier is the most feature-complete, though it runs on shared nodes and doesn't meter origin traffic; Bunny CDN has no free tier but wins on price and a simple API; if your services already live on AWS, CloudFront avoids cross-cloud origin costs. There's no single right answer — follow the method in our CDN provider comparison and trial two weeks of real traffic before committing.

Quick deployment guide (Cloudflare)

1. Create a Cloudflare account and click "Add a Site", entering your domain; it auto-scans your existing DNS records.
2. Point your domain's nameservers at the two addresses Cloudflare provides, then confirm with dig example.com ns +short — propagation usually finishes within 24 hours.
3. Set the SSL mode: Flexible encrypts only the client-to-edge leg; Full requires a certificate on the origin (self-signed is fine); Full Strict also requires a valid, verifiable certificate. If your origin supports it, choose Full Strict.
4. Configure caching rules (next section), then double-check that resolution points at Cloudflare.

Advanced caching strategies

TTL isn't a case of "the longer, the better" — it depends on asset type:

Hashing filenames is the key to "long TTL with no stale updates". A bundler turns app.css into app-8f3a2c.css; change the content, change the name, and the old cache naturally expires — so a 30-day TTL is safe.

Setting Cache-Control response headers on the origin is cleaner than writing rules one by one in the CDN dashboard, because the CDN respects origin directives when it fetches. Nginx example:

location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}
location / {
    add_header Cache-Control "public, max-age=60";
}

Cache warming: before a major release, pre-fetch the homepage and core assets so you don't take a wave of cache misses the moment you ship. Cache purging: when content is corrected, clear the stale copy. Cloudflare purges by URL, prefix, or file tag — API example:

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {token}" \
  -d '{"files":["https://example.com/cover.webp"]}'

One easily overlooked point is protecting the origin path. Hiding your origin IP and allowing only CDN traffic to reach it is the key move against attackers who try to bypass the CDN and hit your server directly; most providers handle this on the free tier via a firewall rule or an "only allow CDN traffic" toggle. On larger sites, teams also add an Origin Shield so edge nodes fan into a single intermediate layer that makes one unified fetch to the origin, further cutting origin requests.

Monitoring performance

Don't rely on "it feels faster" — measure it:

• CDNPerf: cross-compare CDN providers for global latency
• PageSpeed Insights: check whether Core Web Vitals actually improved
• GTmetrix: inspect the waterfall to see which assets still hit the origin and where time goes

Spot-check hit ratio and origin offload monthly. If metrics regress, first look for newly added static files without hashes, or a cache rule accidentally switched to Bypass.

FAQ

• Users still see the old version after I update the origin? Purge the CDN cache first, then confirm the origin's Cache-Control TTL isn't set too long.
• Images fail to load in Flexible mode? Flexible fetches from origin over HTTP; if the origin force-redirects to HTTPS you get a redirect loop — switch to Full.
• Hit ratio is low? Check for many URLs with query strings (like ?utm_source=); these aren't cached by default, so configure "ignore query strings".

16IDC Takeaway

Cloudflare's free plan is enough for the vast majority of sites; upgrade alongside your server selection cost model once traffic grows. CDN value goes beyond acceleration — it's also security and global availability. It should be a standard component of every user-facing site, not an afterthought bolted on post-launch.

Reference: Cloudflare cache docs https://developers.cloudflare.com/cache/