Cloudflare CDN isn’t just about speed; it’s about control you didn’t know you had over how your content is delivered and secured.
Let’s say you’ve just signed up for Cloudflare and pointed your domain’s DNS to their nameservers. What happens next is a dance between your origin server and Cloudflare’s edge. Imagine you’re requesting www.example.com/image.jpg.
- DNS Resolution: Your browser asks, "Where is
www.example.com?" Instead of going directly to your hosting provider, it asks a recursive DNS resolver. That resolver queries Cloudflare’s authoritative nameservers forexample.com. Cloudflare replies with an IP address pointing to one of its edge servers, not your origin. - Edge Server Request: Your browser connects to the Cloudflare edge server IP.
- Cache Check: The edge server first checks its local cache. If
image.jpgis there and still fresh (based on cache-control headers or Cloudflare’s rules), it serves the image directly. This is the fastest path. - Origin Fetch (if cache miss): If the image isn’t cached, or is stale, the Cloudflare edge server acts as a client and requests
image.jpgfrom your origin server (your actual web host). - Origin Response & Caching: Your origin server sends the image back to the Cloudflare edge. Cloudflare then caches this response according to your configured TTLs (Time To Live) and returns it to your browser.
- Browser Renders: Your browser receives the image and displays it.
This flow is governed by your DNS settings, caching rules, and Page Rules.
DNS Configuration: The Foundation
When you add a domain to Cloudflare, you change your domain’s nameservers at your registrar (e.g., GoDaddy, Namecheap) to point to Cloudflare’s provided nameservers. These are unique to your account, like ada.ns.cloudflare.com and ben.ns.cloudflare.com.
Within Cloudflare’s DNS settings for your domain, you’ll manage your DNS records. The crucial ones for web traffic are:
- A Records: Map a hostname (like
wwwor@for the root domain) to an IPv4 address.- Example:
www A 192.0.2.1
- Example:
- CNAME Records: Alias one hostname to another.
- Example:
blog CNAME www.example.com
- Example:
- AAAA Records: Map a hostname to an IPv6 address.
- Example:
www AAAA 2001:db8::1
- Example:
The "cloud" icon next to each record is Cloudflare’s magic.
- Orange Cloud (Proxied): Traffic for this record goes through Cloudflare’s network. This enables CDN caching, WAF, DDoS protection, SSL, etc. Cloudflare provides a dynamic IP address for this record to its users.
- Grey Cloud (DNS Only): Traffic goes directly to the IP address you specify. This is used for services that cannot be proxied, like mail servers (MX records) or SSH.
For www.example.com, you’ll typically have an A record pointing to your origin server’s IP, but with the orange cloud enabled. Cloudflare then intercepts requests for www.example.com and routes them through its network.
Caching: The Speed Engine
Cloudflare’s cache lives on its global network of data centers. It stores copies of your website’s static assets (images, CSS, JavaScript, sometimes even HTML) so it can serve them to users from the nearest edge location, bypassing your origin server entirely.
Key Concepts:
- Browser Cache TTL: How long the user’s browser should cache the asset.
- Edge Cache TTL: How long Cloudflare’s edge servers should cache the asset. This is the most impactful for CDN performance.
- Cache Control Headers: Directives from your origin server (e.g.,
Cache-Control: public, max-age=3600) that tell proxies and browsers how to cache content. Cloudflare respects these by default.
Configuring Edge Cache TTL:
In Cloudflare, under "Caching" -> "Configuration," you can set the "Browser Cache TTL." This setting also influences the Edge Cache TTL for content that doesn’t have explicit Cache-Control directives from your origin.
- Setting: "Respect Existing Headers" (default) - Cloudflare uses
Cache-ControlandExpiresheaders from your origin. - Setting: "2 Hours" (or any duration) - Cloudflare will cache all eligible assets for this duration, overriding your origin’s headers if they are set to a shorter duration. This is powerful for ensuring assets stay cached on the edge.
Cache Behavior:
Cloudflare caches "cacheable" responses. Generally, this includes GET and HEAD requests for resources with appropriate Cache-Control or Expires headers. Responses with Cache-Control: no-store or Cache-Control: private are not cached by Cloudflare’s edge.
Purging the Cache:
If you update an asset on your origin server and want Cloudflare to fetch the new version immediately, you need to purge the cache.
- Action: Go to "Caching" -> "Configuration" -> "Purge Everything" (use sparingly!) or "Custom Purge" to purge specific URLs or patterns.
- Why it works: This tells Cloudflare’s edge servers to invalidate their stored copies, forcing them to re-fetch from your origin on the next request.
Page Rules: Granular Control
Page Rules are like mini-firewall rules or VCL snippets for specific URLs or URL patterns on your site. They allow you to override Cloudflare’s default behaviors for particular paths.
Example: You want to ensure that all images under /assets/ are cached aggressively for a full year, even if your origin server’s headers are less permissive.
- Create a Page Rule:
- URL:
www.example.com/assets/* - Settings:
- Cache Level:
Cache Everything - Edge Cache TTL:
1 year - Disable Performance:
Off(ensure performance features are on) - Forwarding URL: (Leave blank unless redirecting)
- Cache Level:
- URL:
Common Page Rule Uses:
- Cache Everything: Force caching for specific directories or file types.
- Bypass Cache: Prevent caching for dynamic content or specific pages (e.g.,
/account/*). - Forwarding URL: Implement redirects (e.g.,
www.example.com/old-pagetowww.example.com/new-page). - Security Settings: Enable specific WAF rules or SSL modes for certain paths.
- Disable Apps: Turn off Cloudflare features like Rocket Loader for specific pages where they might cause issues.
Important Note: Page Rules are evaluated in order from top to bottom. The first matching rule is applied, and subsequent rules are ignored for that request.
The most surprising thing about Page Rules is how they can selectively disable features that are enabled globally. For instance, you might have "Development Mode" enabled site-wide to clear cache on changes, but a specific Page Rule for /api/* can be set to "Cache Level: Bypass" and "Disable Apps: On" to ensure your API endpoints are never cached and unaffected by other performance optimizations. This precise control allows you to tailor Cloudflare’s behavior down to the individual resource.
Once you have DNS, caching, and Page Rules dialed in, the next thing you’ll likely explore is Cloudflare Workers, which let you run JavaScript at the edge to modify requests and responses dynamically.