Introduction

• Cloudflare sits between your users and your origin server — it can cache, transform, and accelerate every request.
• This guide focuses on the free and Pro tier features most likely to improve Core Web Vitals and reduce origin load.
• Covered: DNS proxy, caching concepts, Cache Rules, Browser TTL, Transform Rules, and the Speed tab.

Step 1: Proxy Your Domain Through Cloudflare

• When a DNS record shows the Cloudflare orange cloud (proxied), traffic passes through Cloudflare's network.
• Benefits: CDN caching, DDoS protection, SSL termination, analytics.
• Just toggling a DNS record to proxied is the fastest performance win available.

Understanding Cloudflare's Cache Layers

• Browser cache: controlled by Cache-Control headers your origin or Cloudflare sends.
• Cloudflare edge cache: Cloudflare's PoPs worldwide cache your content. If a user's request hits a cached PoP, your origin receives zero requests.
• Cache HIT/MISS: visible in the cf-cache-status response header.

Default Caching Behaviour

• Cloudflare caches static file types (CSS, JS, images, fonts) by default.
• Dynamic HTML pages are not cached by default — you must opt in.
• Query strings bypass cache by default (configurable).

Cache Rules (Replaces Legacy Page Rules)

Cache Rules are Cloudflare's modern per-path caching configuration (Page Rules are deprecated for new setups).

Rule 1 — Cache static assets aggressively
  Match: URI path matches /_next/static/*
  Setting: Edge TTL = 1 year, Browser TTL = 1 year, Cache Everything
 
Rule 2 — Cache blog pages for 1 hour
  Match: URI path matches /blog/*  AND  request method = GET
  Setting: Edge TTL = 1 hour, Browser TTL = 1 hour, Cache Everything
 
Rule 3 — Bypass cache for API routes
  Match: URI path starts with /api/
  Setting: Bypass Cache

• Set via: Dashboard → Caching → Cache Rules → Create Rule.

Setting Browser TTL

• Cloudflare can override the Cache-Control: max-age your origin sets.
• For aggressively cached static assets: set Browser TTL to 1 year.
• For HTML pages: respect origin header or set a shorter TTL (e.g., 1 hour for a blog).

Purging the Cache

• Manual purge: Dashboard → Caching → Configuration → Purge Everything (use sparingly).
• Purge by URL: precise, won't bust other cached assets.
• API purge: integrate into your deploy pipeline to automatically purge on new deployments.

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything": true}'

Transform Rules: Rewrite and Redirect

• URL rewrites: map /old-path to /new-path without a server round-trip.
• HTTP response headers: add security headers (X-Frame-Options, Strict-Transport-Security) at the edge — no origin change needed.

Add HSTS header:
  Match: All requests
  Action: Set response header "Strict-Transport-Security" = "max-age=31536000; includeSubDomains; preload"

Performance Features in the Speed Tab

• Minification: auto-minify HTML, CSS, JS (free tier).
• Brotli: serve Brotli-compressed assets (free tier).
• Rocket Loader: asynchronously loads JavaScript — improves FCP on script-heavy pages (test before enabling).
• Cloudflare Fonts: routes Google Fonts requests through Cloudflare to avoid cross-origin latency.
• Early Hints: sends 103 Early Hints for preload links before the full response — Chrome supports this.

Image Optimisation with Polish and Mirage (Pro+)

• Polish: auto-convert images to WebP/AVIF and losslessly compress (Pro tier).
• Mirage: lazy-loads and resizes images for mobile connections (Pro tier).
• Free alternative: use Next.js <Image> component which handles format conversion and sizing natively.

Measuring the Impact

• cf-cache-status: HIT in response headers means your origin wasn't hit.
• Cloudflare Analytics → Cache tab: cache hit rate %; aim for >80% for static-heavy sites.
• Before/after: run Lighthouse or WebPageTest with a cold cache vs warm Cloudflare edge cache.

Conclusion

• Proxying through Cloudflare + turning on Cache Rules for static assets is a 30-minute change that can halve your origin load.
• Cache Rules > legacy Page Rules for new setups — they're more powerful and have a higher limit.
• Monitor your cache hit rate; a low hit rate usually means query strings are busting cache or TTLs are too short.