Cloudflare CDN Setup Guide — Triple Your Website Speed

What Is Cloudflare?

A CDN + security platform with 320+ PoPs (Points of Presence) worldwide that serves static content from close to your users.

• Free plan includes CDN, DDoS protection, and SSL
• Activates immediately once you move DNS to Cloudflare

Connecting Your Domain

1. Go to dash.cloudflare.com → Add Site
2. Enter your domain → select Free plan
3. Confirm auto-imported DNS records
4. Change nameservers at your domain registrar to Cloudflare’s
5. Activation takes up to 24 hours (usually under 5 minutes)

Essential Settings

SSL/TLS

SSL/TLS → Overview → Full (strict)

• Flexible: HTTP to origin server (not recommended)
• Full: HTTPS to origin (allows self-signed certs)
• Full (strict): HTTPS to origin (requires valid cert) ← recommended

HTTPS Redirects

SSL/TLS → Edge Certificates
→ Always Use HTTPS: ON
→ Automatic HTTPS Rewrites: ON
→ HTTP Strict Transport Security (HSTS): Enable (max-age=31536000)

Cache Configuration

Cache Rules

Long-cache static assets:

If: URI Path matches regex \.(js|css|woff2?|png|jpg|webp|svg|ico)$
Then:
  Cache Status: Cache Everything
  Edge Cache TTL: 1 month
  Browser Cache TTL: 1 day

Short-cache HTML:

If: URI Path matches regex \.html$  OR  Content-Type contains text/html
Then:
  Cache Status: Cache Everything
  Edge Cache TTL: 1 hour
  Browser Cache TTL: Respect Origin

Bypass cache for APIs:

If: URI Path starts with /api/
Then:
  Cache Status: Bypass

Cache Purge

# Purge via Cloudflare API (on deploy)
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}'

Auto-purge after GitHub Actions deploy:

- name: Purge Cloudflare cache
  run: |
    curl -X POST \
      "https://api.cloudflare.com/client/v4/zones/${{ secrets.CF_ZONE_ID }}/purge_cache" \
      -H "Authorization: Bearer ${{ secrets.CF_API_TOKEN }}" \
      -H "Content-Type: application/json" \
      --data '{"purge_everything":true}'

Performance Optimization Settings

Speed Tab

Speed → Optimization
→ Auto Minify: JavaScript ✓, CSS ✓, HTML ✓
→ Brotli: ON
→ Early Hints: ON
→ HTTP/3 (QUIC): ON

Image Optimization (Pro plan or via Workers on Free)

// workers/image-resize.js
export default {
  async fetch(request) {
    const url = new URL(request.url);
    const imageURL = url.searchParams.get("url");
    const width = url.searchParams.get("w") || "800";
    
    return fetch(imageURL, {
      cf: {
        image: {
          width: parseInt(width),
          format: "webp",
          quality: 85,
        }
      }
    });
  }
}

Security Settings

WAF (Web Application Firewall)

Security → WAF
→ Managed Rules: Cloudflare Managed Ruleset ON
→ OWASP Core Ruleset ON

Rate Limiting

Security → WAF → Rate limiting rules
→ IF: URI Path contains /api/login
   AND: Requests > 10 per 1 minute (same IP)
→ THEN: Block for 1 hour

Bot Fight Mode

Security → Bots → Bot Fight Mode: ON

Deploying Static Sites on Cloudflare Pages

# Deploy with Wrangler CLI
wrangler pages deploy dist/ --project-name=my-site

# Deploy by environment
wrangler pages deploy dist/ \
  --project-name=my-site \
  --branch=main  # Production

Measuring Performance

Compare before and after setup:

# Use WebPageTest, GTmetrix, or PageSpeed Insights
# Key metrics:
# - TTFB (Time to First Byte): target < 200ms
# - LCP (Largest Contentful Paint): target < 2.5s
# - Cache Hit Rate: target > 80%

Check Cache Hit Rate in Cloudflare Analytics:

Analytics → Performance → Cache Hit Rate

80%+ means your CDN configuration is working well.