Content Delivery Network (CDN)
A CDN is a globally distributed network of edge servers that cache and serve your site’s assets—and, when configured—selected HTML/API responses. By moving content closer to users, CDNs cut latency, offload origin traffic, absorb spikes, and add security layers (WAF, bot mitigation, TLS, DDoS).
How it works
- Edge caching: First user fetch populates the nearest edge; subsequent users in that region get a cache hit.
- Smart routing: Anycast + tiered caches/origin shielding reduce origin trips and cross-continent hops.
- Protocol optimizations: HTTP/2 multiplexing, HTTP/3/QUIC, Brotli compression, TLS session resumption.
- Edge logic: Functions/workers manipulate headers, cookies, rewrites, AB tests, and authentication checks at the edge.
What to cache
- Always: Static assets (
.css
,.js
, fonts, images, PDFs, video thumbnails). - Sometimes: HTML for anonymous pages (blog, product/category listings) with strict rules.
- Usually bypass: Logged-in areas, carts/checkout, personalized dashboards, admin.
Key headers you control
- Cache-Control: Sets edge/browser TTL and behavior.
- Static assets:
public, max-age=31536000, immutable
- HTML (anonymous):
public, s-maxage=600, max-age=0, stale-while-revalidate=60, stale-if-error=3600
- Static assets:
- ETag/Last-Modified: Enables conditional revalidation (
304 Not Modified
). - Surrogate-Key / Cache-Tags: Group objects for precise purges on deploy/content changes (supported by some CDNs).
- Vary: Use sparingly; prefer CDN rules to bypass on certain cookies instead of
Vary: Cookie
.
WordPress / WooCommerce specifics
- Bypass on Woo cookies: Don’t cache HTML when cookies like
woocommerce_items_in_cart
,woocommerce_cart_hash
,wp_woocommerce_session_*
, orwordpress_logged_in_*
are present. Configure this at the CDN (rules/logic). - Don’t cache admin or POST: Exclude
/wp-admin/*
,/wp-login.php
, and all authenticated requests. - Purge strategy: On deploy or product/content update, purge by tag/key or targeted paths; avoid full purges unless necessary.
- Image optimization: Let the CDN auto-convert to WebP/AVIF, resize on the fly, and compress; keep originals in WordPress.
- Canonical host & HTTPS: Redirect apex↔www consistently at the edge; enforce TLS and HSTS.
- Edge compute: Use workers/functions to inject security headers, strip tracking parameters from cache keys, or serve lightweight maintenance pages during incidents.
Example snippets
Apache (static assets)
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|svg|webp|ico|woff2?)$">
Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>
Apache (anonymous HTML at edge, not browser)
<FilesMatch "\.html$">
Header set Cache-Control "public, s-maxage=600, max-age=0, stale-while-revalidate=60, stale-if-error=3600"
</FilesMatch>
Nginx (static assets)
location ~* \.(css|js|png|jpe?g|gif|svg|webp|ico|woff2?)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
Best practices
- Tiered caching/origin shield: Choose a shield POP near your origin to reduce origin hits.
- Reasonable TTLs: Long for fingerprinted assets; short for HTML that changes often.
- Stale controls: Use
stale-while-revalidate
/stale-if-error
to smooth deploys and outages. - Cache keys: Normalize query strings you don’t need; exclude tracking params from the key.
- Monitoring: Track cache hit ratio, origin egress, edge vs. origin TTFB, and 4xx/5xx split.
- Security at edge: Enable WAF, rate limiting, bot protection, and TLS 1.3 with OCSP stapling.
Common pitfalls
- Caching personalized HTML (users see each other’s carts or account pages).
- Double caching conflicts (plugin + CDN) causing stale behavior and hard-to-debug misses.
- Over-broad
Vary
headers exploding cache key cardinality. - Forgetting to purge after deploys or price/inventory changes.
- Mixed content (HTTP assets over HTTPS) blocked at the edge.
KPIs
- Cache Hit Ratio (CHR) overall and by content type.
- Edge TTFB vs Origin TTFB (delta should shrink).
- Origin egress (GB) and request rate (↓ with good CHR).
- Revalidation success rate and purge latency after content changes.