If your website is hosted on a single server in Dallas, a visitor in London has to wait for every request to travel 5,000 miles, get processed, and travel back. At the speed of light through fiber optic cable, that round trip adds roughly 90–120ms of latency — before the server even starts generating your page. For a visitor in Sydney, it's 150–200ms. Multiply that by the dozens of requests a typical page makes, and you can see how geography alone can make your site feel sluggish.
A Content Delivery Network (CDN) solves this by caching your content on servers distributed worldwide. Instead of every request going to Dallas, a London visitor gets served from London. A Sydney visitor gets served from Sydney. The result: load times drop by 50–70%, and in many cases, sites load 3x faster for international audiences.
How CDNs Work: The Fundamentals
A CDN is a network of servers (called edge servers or Points of Presence, or PoPs) distributed across multiple geographic locations. When you enable a CDN for your website, here's what happens:
- A visitor requests your page. Their browser sends a DNS request for your domain.
- DNS routes to the nearest edge server. The CDN's DNS system identifies the closest PoP to the visitor using anycast routing or geographic DNS.
- The edge server checks its cache. If the requested content is cached and not expired, the edge server delivers it directly — no contact with your origin server needed.
- On a cache miss, the edge fetches from origin. If the content isn't cached, the edge server requests it from your origin server, delivers it to the visitor, and stores a copy for future requests.
The key insight is that subsequent visitors in the same region get the cached version, which can be delivered in 10–30ms instead of 200–500ms from the origin. The more traffic you get from diverse locations, the more a CDN helps.
What CDNs Cache
CDNs primarily cache static assets — files that don't change between requests:
- Images (JPEG, PNG, WebP, AVIF, SVG, GIF)
- CSS stylesheets
- JavaScript files
- Fonts (WOFF2, WOFF, TTF)
- Videos and audio files
- PDF documents
Modern CDNs can also cache dynamic HTML pages (full-page caching), which is particularly powerful for WordPress sites where the HTML output rarely changes between requests. This is called edge caching or full-page CDN caching.
CDN Performance Benchmarks
We tested a WordPress site (20 pages, 15 images per page, typical ecommerce layout) with and without a CDN from five global locations:
| Visitor Location | Without CDN (TTFB) | With CDN (TTFB) | Improvement |
|---|---|---|---|
| Same city as server | 45ms | 22ms | 51% faster |
| Same continent (1,500 mi) | 120ms | 35ms | 71% faster |
| Cross-continent (5,000 mi) | 280ms | 40ms | 86% faster |
| Opposite hemisphere (10,000 mi) | 480ms | 55ms | 89% faster |
| Full page load (avg all locations) | 3.8s | 1.2s | 3.2x faster |
The pattern is clear: the farther your visitor is from your origin server, the bigger the CDN improvement. For sites with a global audience, a CDN isn't optional — it's essential.
Types of CDN Integration
1. Pull-Based CDN (Most Common)
The CDN pulls content from your origin server when it first receives a request. After the first request, the cached copy is served to subsequent visitors. This is the easiest to set up and works with any website.
How to set up: Point your DNS to the CDN (for full-site CDN like Cloudflare) or configure a CDN subdomain/URL rewriting (for asset-only CDNs like BunnyCDN or KeyCDN).
2. Push-Based CDN
You upload content directly to the CDN's storage, and it's served from there. There's no origin server involved for those assets. This is common for video hosting, software downloads, and very large static sites.
Best for: Large media files, software distribution, and static site generators.
3. Reverse Proxy CDN
The CDN sits between visitors and your origin server, intercepting all traffic. It can cache entire pages, optimize images on-the-fly, and even run serverless functions at the edge. Cloudflare is the most well-known example.
Best for: Most websites, especially WordPress and ecommerce sites that benefit from full-page caching and security features.
Serverlys Tip: Our cloud hosting plans include built-in CDN integration, so your static assets are automatically served from edge servers worldwide. You get the speed benefits without the complexity of managing a separate CDN provider.
How to Set Up a CDN: Step by Step
Option 1: Cloudflare (Full-Site CDN)
Cloudflare is the most popular CDN choice because it offers a generous free tier and acts as a full reverse proxy. Setup takes about 15 minutes:
- Create a Cloudflare account at cloudflare.com and add your domain.
- Update your nameservers. Cloudflare will provide two nameservers. Update them at your domain registrar. This typically takes 1–24 hours to propagate.
- Configure SSL. Set SSL mode to "Full (Strict)" if your origin server has a valid SSL certificate. This ensures end-to-end encryption.
- Enable caching. Cloudflare caches static assets by default. For WordPress, install the Cloudflare plugin and enable automatic cache purging when you publish or update content.
- Set up Page Rules or Cache Rules. Create rules to cache HTML pages for dynamic sites. Set "Cache Everything" for pages that don't change often, with "Edge TTL" of 2–4 hours and "Browser TTL" of 30 minutes.
- Enable optimizations. Turn on Auto Minify (HTML, CSS, JS), Brotli compression, HTTP/3, and Early Hints in the Speed settings.
Option 2: BunnyCDN (Asset-Only CDN)
BunnyCDN is a lightweight, affordable CDN that's excellent for serving static assets. It's less complex than Cloudflare but doesn't act as a reverse proxy:
- Create a pull zone in the BunnyCDN dashboard. Enter your origin server URL.
- Get your CDN URL. BunnyCDN provides a URL like
yoursite.b-cdn.net. You can also set up a custom subdomain likecdn.yoursite.com. - Rewrite asset URLs. Update your site to load images, CSS, and JavaScript from the CDN URL instead of your origin. For WordPress, use a CDN enabler plugin.
- Configure caching. Set long cache expiration for static assets (1 year) and short expiration for HTML files (if caching HTML).
CDN for WordPress (Specific Steps)
WordPress sites benefit enormously from CDN integration. Here's the recommended setup:
- Install LiteSpeed Cache or W3 Total Cache. Both have built-in CDN integration that rewrites asset URLs automatically.
- Configure CDN URL. Enter your CDN domain (e.g., cdn.yoursite.com) in the plugin's CDN settings.
- Set file types to serve via CDN. Include images, CSS, JavaScript, and fonts. Exclude dynamic files like wp-admin assets.
- Enable CORS headers. If using a CDN subdomain, ensure proper CORS headers so fonts and scripts load correctly across domains.
- Set up cache purging. Configure automatic cache purging when posts are updated or plugins are activated. Most CDN plugins handle this automatically.
CDN Comparison: Choosing the Right Provider
| Provider | Free Tier | Paid Pricing | PoPs | Best For |
|---|---|---|---|---|
| Cloudflare | Yes (generous) | From $20/mo | 310+ | Most websites, security + CDN |
| BunnyCDN | 14-day trial | $0.01/GB | 120+ | Budget-friendly, simple setup |
| KeyCDN | No | $0.04/GB | 50+ | Pay-per-use, developer-friendly |
| AWS CloudFront | 1TB free/year | $0.085/GB | 450+ | AWS ecosystem, enterprise |
| Fastly | No | $0.12/GB | 90+ | Real-time purging, edge compute |
For most small to medium websites, Cloudflare's free tier provides everything you need: global CDN, DDoS protection, SSL, and basic optimization. If you need more control over caching behavior or lower per-GB pricing at scale, BunnyCDN is an excellent alternative.
CDN Advanced Features Worth Using
Image Optimization at the Edge
Some CDNs can automatically resize, compress, and convert images to WebP or AVIF at the edge. This means you upload one high-resolution image, and the CDN serves the optimal version for each visitor's device and browser. Cloudflare (paid plans) and BunnyCDN (Bunny Optimizer) both offer this.
Edge Caching for Dynamic Content
For WordPress and other CMS platforms, edge caching stores the full HTML page at the CDN edge. This means the CDN serves complete pages without contacting your origin server at all. TTFB drops to 10–30ms regardless of visitor location.
The challenge is cache invalidation: when you update a post, the CDN needs to know. Solutions include:
- Automatic cache purging via plugin (LiteSpeed Cache, WP Cloudflare Super Page Cache)
- API-based purging triggered by WordPress hooks
- Short TTLs (2–4 hours) with stale-while-revalidate headers
Early Hints (HTTP 103)
Early Hints is a feature where the CDN sends preload instructions to the browser before the origin server even finishes generating the page. The browser starts downloading critical CSS and fonts while waiting for the HTML. Cloudflare supports this automatically.
Common CDN Mistakes
- Not purging cache after updates. If you update your CSS but the CDN serves the old version, your site breaks visually. Always set up automatic cache purging or use cache-busting filenames.
- Caching logged-in pages. Never cache pages for logged-in users or pages with personalized content (shopping carts, user dashboards). CDN plugins handle this by default, but verify.
- Missing CORS headers. If you serve fonts from a CDN subdomain without CORS headers, browsers will block them. Add
Access-Control-Allow-Origin: *for font files. - Over-aggressive caching. Caching everything with a 1-year TTL sounds great until you need to push an urgent fix. Use versioned filenames (style.abc123.css) so you can cache aggressively while still deploying changes instantly.
- Ignoring mobile optimization. Some CDNs can serve different cached versions for mobile and desktop. If your site serves different HTML to mobile users, enable device-based caching to avoid serving desktop HTML to mobile visitors.
Serverlys Tip: CDN performance depends on your origin server speed too. A fast origin means faster cache fills and better performance for cache misses. Our cloud hosting with NVMe SSDs and LiteSpeed provides the fast origin that makes your CDN even more effective. See our plans.
Frequently Asked Questions
Do I need a CDN if my audience is in one country?
Even for a single-country audience, a CDN helps. Countries like the US, Canada, and Australia are geographically large. A visitor in New York accessing a server in Los Angeles still adds 60–80ms of latency. CDN edge servers within the same country reduce this to under 20ms. Plus, CDNs provide DDoS protection and reduce load on your origin server.
Will a CDN work with my WordPress site?
Yes. WordPress works extremely well with CDNs. Plugins like LiteSpeed Cache, W3 Total Cache, and WP Super Cache all have built-in CDN integration. Cloudflare works at the DNS level and requires no WordPress plugin at all (though the Cloudflare plugin adds useful features like automatic cache purging).
Does a CDN affect SEO?
Positively. CDNs improve page speed, which is a Google ranking factor. They reduce TTFB, improve LCP, and help you pass Core Web Vitals. The speed improvement can lead to 5–15% more organic traffic over time. CDNs don't create duplicate content issues because you use your own domain, not the CDN's domain.
What's the difference between a CDN and caching?
Caching stores content for faster re-delivery. A CDN is a network of servers that cache content at multiple geographic locations. Your origin server can cache pages locally (server-side caching), and a CDN caches them globally (edge caching). They work together: server-side caching speeds up origin responses, and CDN caching delivers those responses from the nearest edge server.
How much does a CDN cost?
Cloudflare offers a free tier that handles most small-to-medium websites. BunnyCDN charges as little as $0.01/GB, which for a typical site serving 50GB/month is just $0.50. For most websites, CDN costs are minimal or free — and the performance returns far outweigh the expense.