Cloudflare CDN Integration

Performance Toolkit integrates with Cloudflare CDN to serve your content globally from edge locations, reducing latency and improving performance worldwide.

What is Cloudflare?

Cloudflare is a global Content Delivery Network (CDN) that:

• Caches your site on servers worldwide
• Serves content from the location closest to each visitor
• Reduces origin server load
• Improves performance globally
• Provides security features (DDoS protection, WAF)

With Cloudflare, a US visitor gets content from US servers, a UK visitor from UK servers, etc.—dramatically faster than serving from a single origin server.

Prerequisites

1. Cloudflare account — sign up free at cloudflare.com
2. Domain on Cloudflare — point your domain's nameservers to Cloudflare (free)
3. Cloudflare API token — generate in your account settings
4. Zone ID — your Cloudflare domain ID (visible in account dashboard)

Getting Your API Token and Zone ID

Step 1: Get Zone ID

1. Log in to Cloudflare dashboard
2. Select your domain
3. Copy the Zone ID from the right sidebar (under "API")

Step 2: Create API Token

1. In Cloudflare dashboard, click your profile icon (top right)
2. Go to My Profile → API Tokens
3. Click Create Token
4. Choose Edit zone DNS or Custom token template
5. Configure scopes:
   • Set to your specific zone (domain)
   • Grant Cache Purge permission
   • Grant Zone Read permission
6. Create token and copy the value

Setting Up Cloudflare Integration

1. Go to Performance Toolkit → CDN & Integrations
2. Select Provider: Cloudflare
3. Paste your API Token
4. Paste your Zone ID
5. Check Auto-purge on content update (recommended)
6. Click Test Connection to verify credentials
7. Click Save changes

Features

Test Connection

Verifies your API token and Zone ID are correct before saving.

1. Enter API token and Zone ID
2. Click Test Connection
3. Success ✅ — credentials are valid
4. Error ❌ — check token/zone ID and try again

Purge Cache

Clears all cached content from Cloudflare edge servers.

Use when:

• You made manual changes that should appear immediately
• Cache seems stale
• After major site updates
• Before client testing/demos

1. Go to CDN & Integrations
2. Click Purge Cache
3. Cloudflare clears all cached files
4. Content re-caches on next user request

Auto-purge on Content Update

When enabled, cache is automatically purged when:

• Posts/pages are published or updated
• Draft changes are saved
• Comments are approved
• Theme/plugin changes occur
• Settings are updated

Recommended — Enable this to keep Cloudflare cache in sync with your site changes. Slight overhead for automatic purge requests.

Cache Behavior

What Gets Cached

Cloudflare caches:

• ✅ Static HTML (if page cache enabled in Performance Toolkit)
• ✅ CSS files
• ✅ JavaScript files
• ✅ Images and media
• ✅ Fonts
• ✅ PDFs and downloads

What Doesn't Get Cached

• ❌ HTML with Set-Cookie headers (user-specific pages)
• ❌ Admin pages (/wp-admin, /wp-login.php)
• ❌ Comment forms
• ❌ Dynamic content (unless explicitly configured)

Combining with Page Cache

For best performance, use both Performance Toolkit page caching AND Cloudflare:

1. Page Cache (Performance Toolkit) — caches on your origin server
2. Cloudflare Cache — caches on global edge locations

Combined benefit:

• Origin server stays fast (local cache)
• Global visitors stay fast (edge cache)
• Origin only hit on cache miss (rare after first few visits)

Performance Impact

Typical improvements from Cloudflare integration:

Metric	Improvement
Response time (global)	30-70% faster
Time to First Byte	20-40% improvement
Page load time	10-30% faster
Origin server load	50-80% reduced
Bandwidth costs	10-40% reduced

Results vary based on:

• Geographic distribution of traffic
• Origin server location
• Content types
• Cache TTL settings

Advanced Configuration

Cache Rules (in Cloudflare Dashboard)

Fine-tune what Cloudflare caches:

1. Log in to Cloudflare dashboard
2. Go to your domain
3. Click Caching → Cache Rules
4. Configure rules for specific URL patterns
5. Examples:
   • Cache homepage for 1 hour
   • Cache /blog/* for 24 hours
   • Don't cache /api/*

Browser Cache TTL

Set how long browsers cache your content:

1. In Cloudflare: Caching → Browser Cache TTL
2. Recommended: 2-4 hours
3. Longer = better performance but older content in some browsers

Purge Cache from Cloudflare Dashboard

Alternative to using Performance Toolkit:

1. Cloudflare dashboard
2. Select domain → Caching → Configuration
3. Click Purge Everything
4. Wait for purge to complete

Troubleshooting

Test Connection fails

1. Check API token — copy from Cloudflare again, verify no extra spaces
2. Check Zone ID — make sure it's specifically for that domain
3. API token permissions — verify token has Cache Purge permissions
4. Rate limiting — wait a few minutes and try again

Cache not updating after publishing

1. Verify auto-purge is enabled — check CDN & Integrations settings
2. Check Cloudflare cache rules — may override auto-purge
3. Manually purge — click Purge Cache button to clear immediately

Performance didn't improve

1. Cloudflare benefits depend on traffic distribution
   • Local traffic (single country) sees less benefit
   • Global traffic sees major improvement
2. Check cache hit rate — Cloudflare dashboard shows % of cached requests
3. Combine with other optimizations — CDN is one piece of larger strategy

"Unauthorized" errors

Usually token revoked or permissions changed:

1. Generate new API token in Cloudflare
2. Update token in Performance Toolkit
3. Test connection again

Best Practices

• ✅ Enable both Performance Toolkit page cache AND Cloudflare
• ✅ Use auto-purge on content update
• ✅ Monitor cache hit rate in Cloudflare dashboard
• ✅ Test performance improvements with Google PageSpeed
• ✅ For HTTP API responses, set appropriate cache headers
• ✅ Keep API token secure; never share publicly

Security Notes

• Keep your API token secure
• Never commit to version control
• Cloudflare provides DDoS protection and WAF on free plan
• Use Cloudflare's security settings for additional hardening

Free vs Paid Plans

This integration works on all Cloudflare plans:

Feature	Free	Pro+
Global CDN	✅	✅
Cache purge	✅	✅
API access	✅	✅
DDoS protection	✅	✅ Advanced
WAF	✅	✅ Advanced

Next Steps

1. Set up on staging first to test
2. Monitor Dashboard and System Status metrics
3. Verify performance improvements
4. Roll out to production when confident
5. Continue monitoring performance metrics

Cloudflare + Performance Toolkit = a powerful combination for global performance.