Gabriel Caiana
English Português

HTTP Caching and CDN with Cloudflare - Complete Guide

Table of contents
  1. 1. Introduction
  2. 2. HTTP Cache Fundamentals
  3. What is caching?
  4. Why does it exist?
  5. Where does it take place?
  6. Cache lifecycle
  7. 3. Cache HTTP Headers (Practical Explanation)
  8. Cache-Control
  9. ETag
  10. Last-Modified
  11. Expires
  12. Vary
  13. 4. Cache Status in Practice
  14. Basic Statuses
  15. Advanced Statuses
  16. 5. Cloudflare as a Case Study
  17. Global Network
  18. Edge Caching
  19. Page Rules
  20. API cache
  21. Tiered Cache
  22. Polish
  23. 6. Hands-on Setup on Cloudflare
  24. Example Page Rules
  25. Workers for custom cache
  26. Cloudflare response headers
  27. Simplified visual flow
  28. 7. Debugging and Monitoring
  29. Interpreting headers
  30. Tools
  31. Important metrics
  32. Troubleshooting
  33. 8. Advanced Strategies
  34. Stream with Geo-cache
  35. 9. Real Use Cases
  36. E-commerce
  37. Blog/CMS
  38. SaaS
  39. REST API
  40. 10. Best Practices and Pitfalls
  41. Of the
  42. Don’ts
  43. Common Pitfalls
  44. Performance Tips
  45. 11. Future and Trends
  46. Conclusion
  47. Useful Links

1. Introduction

Imagine two situations: you enter an e-commerce website and the page opens in less than 1 second. Great experience, right? Now, think about the opposite: you click on a link and wait 5, 6, 7 seconds for it to load. You’ll probably close the tab and walk away.

Slowness isn’t just a user experience problem — it’s also costly. More loading time means greater bandwidth consumption, overloaded servers and lost conversions. This is where HTTP caching comes in: the art of storing content intelligently so that we don’t need to recreate or fetch the same thing over and over again.

And when we talk about cache distributed around the world, Cloudflare stands out as one of the largest CDNs (Content Delivery Networks), bringing not only speed, but also savings and security to modern applications.

2. HTTP Cache Fundamentals

What is caching?

Cache is like a library. If you borrow a book and someone else also needs it, there’s no point looking at the publisher again — just lend the same copy.

On the web, caching does exactly that: stores responses so they can be reused.

Why does it exist?

  • Resource savings: fewer requests to the origin server.
  • Speed: response delivered directly from the cache.
  • User Experience: Fast pages increase retention and conversion.

Where does it take place?

  • Browser: stores static resources (images, CSS, JS).
  • Proxy: intermediaries such as corporate proxies.
  • CDN: distributed in various parts of the world.
  • Server: internal cache (e.g. Redis, Varnish).

Cache lifecycle

Storage → Validation → Expiration → Renewal

3. Cache HTTP Headers (Practical Explanation)

Cache-Control

Defines how and for how long a resource can be cached.

Cache-Control: public, max-age=3600
  • max-age=3600: valid for 1 hour.
  • public: any cache can store.
  • private: only the user’s browser.
  • no-store: never curl.
  • no-cache: needs to validate before using.

ETag

A unique identifier for the content. Allows validation without transferring everything again.

ETag: "abc123"

If the client already has this ETag, the server may respond with 304 Not Modified.

Last-Modified

Compare dates.

Last-Modified: Mon, 28 Aug 2023 10:00:00 GMT

Expires

Legacy method that sets the absolute expiration date.

Expires: Wed, 30 Aug 2023 10:00:00 GMT

Vary

Cache based on specific headers.

Vary: Accept-Encoding

This ensures that gzip and brotli versions are differentiated.

4. Cache Status in Practice

When we use Cloudflare, the response headers read CF-Cache-Status. The main ones are:

Basic Statuses

  • HIT: resource found in cache.
  • MISS: first visit or resource not yet stored.
  • BYPASS: cache bypassed (ex: /api/).
  • EXPIRED: resource was in the cache but passed max-age.

Advanced Statuses

  • STALE: old content served while searching for the new version.
  • UPDATING: Cloudflare is updating the cache in the background.
  • REVALIDATED: resource validated via 304.
  • DYNAMIC: personalized, non-cacheable content.

5. Cloudflare as a Case Study

Global Network

Cloudflare has more than 300 data centers spread across the world. This means that the user receives content from the geographically closest server.

Edge Caching

Unlike the origin server (its main application), the cache is located at the edge of the Cloudflare network, close to the user.

Page Rules

Allows you to configure specific caching rules per URL.

API cache

Programmatic control via Workers for advanced decisions.

Tiered Cache

Hierarchy between data centers to reduce requests to the origin server.

Polish

Automatic image optimization, reducing bandwidth without noticeable loss.

6. Hands-on Setup on Cloudflare

Example Page Rules

*.example.com/api/* → Bypass Cache
*.example.com/static/* → Cache Everything, Edge TTL: 1 month
*.example.com/images/* → Cache Everything, Browser TTL: 1 day

Workers for custom cache

export default {
  async fetch(request, env) {
    let cacheUrl = new URL(request.url);

    // Do not cache dynamic APIs
    if (cacheUrl.pathname.startsWith('/api/')) {
      return fetch(request);
    }

    let cache = caches.default;
    let response = await cache.match(request);

    if (!response) {
      response = await fetch(request);
      response = new Response(response.body, response);
      response.headers.append("Cache-Control", "max-age=3600");
      event.waitUntil(cache.put(request, response.clone()));
    }

    return response;
  }
};

Cloudflare response headers

CF-Cache-Status: HIT
CF-RAY: 7d4f2b8e9c1e2f3a-LAX

Simplified visual flow

User → CDN (Cloudflare) → Origin Server

  1. User sends request
  2. Cloudflare checks local cache
     └── HIT: serves directly from edge
     └── MISS: fetches from origin, stores at edge

7. Debugging and Monitoring

Interpreting headers

  • CF-Cache-Status: shows cache status.
  • X-Cache: used in other CDNs.

Tools

  • Chrome DevTools → Network tab.
  • curl -I https://site.com → see headers.
  • Cloudflare Analytics → cache hit ratio reports.

Important metrics

  • Cache Hit Ratio: percentage of responses served from the cache.
  • TTFB: time to first byte.
  • Bandwidth Savings: traffic savings.

Troubleshooting

  • Resource not caching? Check Cache-Control.
  • Stale content appearing? Adjust stale-while-revalidate.

8. Advanced Strategies

  • Cache invalidation: purge specific files or the entire cache.
  • Edge Side Includes (ESI): page fragment cache.
  • Geo-location caching: deliver content by region.
  • Mobile vs Desktop: differentiated cache.
  • A/B testing: use Vary headers.

Stream with Geo-cache

User (Brazil) → Sao Paulo Edge → HIT
User (USA)    → New York Edge → MISS → fetches from origin

9. Real Use Cases

E-commerce

  • Products: curly pages.
  • Images: stored on the edge.
  • Prices: do not cache (dynamic).

Blog/CMS

  • Posts: cacheable.
  • Assets: long-lasting.
  • Comments: dynamic.

SaaS

  • Dashboard: dynamic.
  • API: conditional cache.
  • Static Assets: Long TTL.

REST API

  • Caching by endpoint and parameters.
  • Example: /api/products?limit=10 can be cached for 30s.

10. Best Practices and Pitfalls

Of the

  • Asset versioning (style.v2.css).
  • Set appropriate TTL.

Don’ts

  • Do not cache personalized content.
  • Do not store resources with credentials.

Common Pitfalls

  • Cache sensitive APIs.
  • Mixed content issues.

Performance Tips

  • Use compression (gzip, brotli).
  • Minify CSS/JS.
  • HTTP/3 and QUIC: lower latency.
  • Edge Computing: cache with applied logic.
  • AI/ML: cache prediction.
  • WebAssembly: code cache compiled on the edge.

Conclusion

HTTP caching, when combined with a CDN like Cloudflare, is one of the pillars of modern web performance. Knowing how to configure correctly not only improves speed, but also reduces costs and increases conversions.

Final Tip: Always measure, monitor, and adjust your caching strategy. What works for a blog may not work for an API.