Cloudflare Performance Optimization Playbook — Birdor Cloudflare Tutorial Series (Part 8)
Leeting Yan
Cloudflare improves performance out of the box, but thoughtful configuration can push your site (especially a Hugo/JAMstack site) to exceptional global performance.
This final chapter gathers Cloudflare’s performance-focused features into a calm, practical playbook. Each recommendation is designed to be simple to understand and safe to apply.
1. The Three Layers of Cloudflare Performance
Cloudflare performance can be thought of as three layers:
1. Global Network & Routing
Anycast routing, edge proximity, Argo Smart Routing.
2. CDN & Caching
Edge caching, cache rules, Tiered Cache, compression.
3. Application Optimization
Image rules, HTML optimization, file fingerprinting, Workers logic.
Understanding this structure makes optimization decisions clearer.
2. Baseline Recommendations (Works for All Sites)
2.1 Enable Brotli compression
Under Speed → Optimization → Brotli
This reduces file sizes significantly.
2.2 Enable HTTP/3
Improves latency, especially on mobile networks.
2.3 Force HTTPS
Ensures consistent, secure delivery.
2.4 Set browser cache TTL
For static Hugo sites, 4 hours is a safe default:
Browser Cache TTL: 4 hours
2.5 Upgrade to modern TLS
Set “Minimum TLS Version” to TLS 1.2.
These are safe defaults for nearly all Cloudflare deployments.
3. Optimizing Caching Behavior (High ROI)
Cloudflare’s caching is the biggest performance lever you control.
3.1 Cache HTML for Hugo sites
Under Rules → Cache Rules → Create Rule:
If: URL Path matches *.html
Then: Cache Level = Cache Everything
Edge TTL = 1 hour (or more)
HTML is static in Hugo.
Caching it dramatically improves global performance.
3.2 Cache assets aggressively
For fingerprinted files (e.g., app.abcd1234.css):
Cache-Control: public, max-age=31536000, immutable
Cloudflare will reuse these assets for up to a year.
3.3 Enable Tiered Cache
Cloudflare → Caching → Tiered Cache → Enable
Tiered Cache reduces origin load and speeds up cache misses.
3.4 Avoid unnecessary query-string variance
Normalize query strings using Transform Rules if needed.
3.5 Purge cache selectively
Prefer path-specific purges instead of global purges.
This avoids cold starts globally.
4. Page Rules, Cache Rules, and Transform Rules (A Simple Strategy)
4.1 Prefer Cache Rules for modern caching
Cache Rules give you more control and priority.
Example rule for static assets:
If: URL matches /assets/*
Then: Cache Everything
4.2 Use Transform Rules to set Cache-Control headers
Example:
If: URL matches *.css
Then: Add Header Cache-Control: public, max-age=31536000, immutable
4.3 Keep Page Rules for simple redirects
They are still useful for:
- redirecting
/old→/new - forwarding mobile traffic
- simple canonical rewrites
This 3-rule approach keeps your configuration tidy.
5. Image Optimization & Delivery
Images are often the largest files on a page.
Cloudflare provides multiple tools to improve them.
5.1 Enable Polish (if available)
Automatically compresses and optimizes JPEG/PNG.
5.2 Enable WebP/AVIF conversion
Modern formats significantly reduce size.
5.3 Use Cloudflare Image Resizing
Transform images on the fly:
Example Worker snippet:
return fetch(imageURL, {
cf: {
image: {
width: 1200,
height: 0,
quality: 75,
format: "auto"
}
}
});
5.4 Lazy-load images in Hugo
Hugo’s image processing + loading="lazy" gives further gains.
6. Argo Smart Routing (Optional but High Impact)
What Argo does:
- finds the fastest network paths
- avoids congestion
- reduces overall latency
If your site is global or API-heavy, Argo can noticeably improve performance.
7. Cloudflare Pages Performance Settings (Hugo Specific)
7.1 Build Hugo in production mode
Set environment variable:
HUGO_ENV = production
And for extended builds:
HUGO_VERSION = <extended-version>
7.2 Keep your /public output clean and minified
Hugo already:
- minifies CSS (if configured)
- optimizes JS (if using pipelines)
- resizes/compresses images
7.3 Serve fingerprinted assets
Hugo’s built-in asset pipeline supports:
resources.Fingerprint
This works perfectly with Cloudflare’s long-lived caching.
8. Using Cache API in Workers
Workers can cache API responses for major performance gains.
Example:
export async function onRequest(context) {
const cache = caches.default;
const url = new URL(context.request.url);
let response = await cache.match(url);
if (response) return response;
response = await fetch("https://api.example.com/data");
await cache.put(url, response.clone());
return response;
}
This pattern is ideal for:
- rate-limited APIs
- expensive API calls
- slow upstream servers
- search endpoints
- content aggregation
9. Route Performance & Traffic Control
9.1 Use “Cache Bypass” for dynamic routes
For example:
/api/* -> Bypass Cache
/admin/* -> Bypass Cache
9.2 Prefetch important links
Cloudflare Prefetch automatically warms caches.
9.3 Geo Routing (with Workers)
Serve region-specific content from the edge:
const country = context.request.cf.country;
9.4 Trim unnecessary cookies
Cookies reduce cacheability.
Ensure your Hugo site avoids sending cookies for static pages.
10. Measuring Performance
Use these tools to measure real-world performance:
10.1 WebPageTest
Provides multi-region testing.
10.2 Lighthouse
Evaluates LCP, FID, CLS, and more.
10.3 Cloudflare Analytics
Check:
- cache hit ratio
- bandwidth saved
- origin pulls
10.4 RUM (Real User Monitoring)
Use Cloudflare Web Analytics for real-world user metrics.
11. Birdor’s Recommended Cloudflare Performance Stack
A simple, proven configuration:
- HTML caching enabled
- Aggressive caching for hashed assets
- Tiered Cache enabled
- Brotli compression enabled
- WebP/AVIF image optimization
- Transform Rules for Cache-Control headers
- No unnecessary cookies
- Cache API for Functions/Workers
- Normalized query strings
- Automatic HTTPS & HTTP/3 enabled
- Optional: Argo Smart Routing
This setup produces excellent global performance with minimal maintenance — consistent with Birdor’s philosophy of clarity and reliability.
12. Troubleshooting Performance Issues
Poor LCP
- image too large
- no HTML caching
- cache expired
- slow API call blocking the page
Slow global TTFB
- HTML not cached
- Tiered Cache disabled
- competing rules interfering
Large JS bundles (SPA frameworks)
- use code splitting
- remove unused dependencies
- consider SSR or SSG patterns
Slow API endpoints
- enable Cache API
- optimize worker code
- add rate limiting to protect origin
- reduce upstream latency
13. Conclusion — Building a Fast, Modern Web Experience
In this final chapter, we explored Cloudflare’s performance tooling:
- caching
- image optimization
- compression
- routing
- edge compute
- analytics
When combined thoughtfully, these features help you create fast, predictable, globally distributed experiences — whether you’re building with Hugo, a full JAMstack app, or a serverless API.
This closes the Birdor Cloudflare Tutorial Series.
You now have a strong foundation in Cloudflare’s platform and how to use it effectively.