CDN Foundation
A Content Delivery Network (CDN) like Cloudflare sits between your users and your origin server, caching your website's static assets and HTML at edge locations around the world. By serving content from a data center physically closer to the visitor, a CDN dramatically reduces latency, protects your server from traffic spikes, and is essential for achieving a fast Time to First Byte (TTFB) globally.
CDN vs Other Cache Layers
| Layer | Scope | Benefit | Limitation |
|---|---|---|---|
| Server Cache (LSCache) | HTML stored on origin server | Fast for local origin | Doesn't reduce global latency |
| Browser Cache | Assets stored on device | Zero network on repeat visits | First visit always needs download |
| Object Cache (Redis) | DB queries stored in memory | Speeds logged-in/dynamic views | No impact on geographic latency |
| CDN (Cloudflare) | HTML + assets cached at edge PoPs | Cuts latency, protects, global delivery | Must exclude dynamic/cart pages |
How Cloudflare Improves Delivery
| Feature | What It Does | Why It Matters | Typical Impact |
|---|---|---|---|
| Edge HTML Caching (APO) | Serves full pages from PoPs | Reduces global TTFB | TTFB 0.6–1.0s globally |
| Tiered Cache | Upper-tier PoPs share cache with lower-tier | Improves cache hit-rate, reduces origin pulls | PSI +5–10 |
| Brotli Compression | Compresses assets at edge | Faster transfer, smaller payload | FCP/LCP 0.1–0.3s |
| Early Hints | Sends preload hints while origin still processes | Faster rendering | LCP 0.1–0.2s |
| Anycast DNS | Routes to nearest PoP automatically | Faster DNS resolution | DNS 20–50ms |
| WAF/Rate Limiting | Filters malicious traffic | Stability + uptime | Prevents downtime |
Performance Benefits in Numbers
| Metric | Without Cloudflare | With Cloudflare | Gain |
|---|---|---|---|
| Global TTFB (Asia→US origin) | 1.2–1.6s | 0.3–0.5s | 0.9–1.1s |
| Global LCP | 2.8–3.5s | 1.9–2.4s | 0.9–1.1s |
| PSI Mobile | 65–75 | 80–90 | +15–20 points |
| DNS Resolution | 60–120ms | 20–50ms | 40–70ms |
Static vs Dynamic Strategy
- Static (Blogs, Marketing, Docs)
- Dynamic (WooCommerce, LMS)
Strategy: Aggressive Cloudflare edge caching (APO ON, long TTL).
Why: Safe to serve prebuilt HTML; content rarely changes, yielding the highest performance gains.
Strategy: Edge cache HTML for public pages, bypass checkout/cart/account. Pair with Redis + ESI for logged-in sessions.
Why: Preserves cart/account functionality while still optimizing public pages for regular visitors.
Best Practices
- Always use Cloudflare DNS + Proxy (orange cloud).
- Enable APO for HTML caching.
- Combine with LSCache at origin — LSCache = HTML source, Cloudflare = global delivery.
- Exclude cart/checkout/account routes from edge cache.
- Turn on Tiered Cache for global consistency.
- Always test after enabling features — avoid broken logins or carts.
Verification Steps
Check via curl
curl -I https://example.com/
Expected Output:
cf-cache-status: HIT
cf-ray: <id>
Check DNS resolution speed
dig example.com | grep "Query time"
Expected Output:
;; Query time: 20 msec
Quick Lab
Lab Instructions
- Point DNS to Cloudflare — wait for propagation.
- Enable orange cloud proxy.
- Enable APO + Brotli + Tiered Cache.
- Visit site from 2 regions (US + Asia).
- Run
curl -Ito confirmcf-cache-status: HIT. - Run Lighthouse — compare TTFB/LCP before vs after.
Cheat Sheet (Foundation Cloudflare CDN)
View Cheat Sheet
| Task | Setting |
|---|---|
| DNS | Cloudflare Anycast DNS |
| Proxy | Orange Cloud = ON |
| HTML Cache | APO ON |
| Asset Cache | Auto, Brotli ON |
| Global Delivery | Tiered Cache ON |
| Exclusions | /cart/, /checkout/, /my-account/ |
| Verify | cf-cache-status: HIT |
| Security | WAF + Rate Limiting ON |
With Cloudflare in place, expect global TTFB < 500ms and Core Web Vitals score improvements across mobile and desktop.