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

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.

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.