Performance Analysis Toolkit

Learning Focus

By the end of this lesson you will be able to diagnose slow performance using headers, Cloudflare trace, and browser developer tools.

Identifying the Bottleneck

When a site is slow, you need to determine if the delay is happening at the Edge, at your Origin, or in the User's Browser.

flowchart LR
    U["Browser"] -- "1. Latency" --> E["Edge PoP"]
    E -- "2. Cache Miss / Processing" --> O["Origin Server"]
    O -- "3. Response Generation" --> E
    E -- "4. Optimization / Delivery" --> U

    style E fill:#f6821f,color:#fff,stroke:#e5711e
    style O fill:#6b7280,color:#fff,stroke:#4b5563

Debugging Cache Misses

If your content should be cached but isn't, check the CF-Cache-Status header:

Header Value	Meaning	Action
HIT	Served from Cloudflare cache	✅ Healthy
MISS	Not in cache, fetched from origin	Normal for first request
BYPASS	Configuration told Cloudflare not to cache	Check your Cache Rules / Page Rules
EXPIRED	Was in cache but TTL expired	Increase your Edge TTL
DYNAMIC	Feature is dynamic (e.g. Worker)	Cloudflare doesn't cache by default

Why is it DYNAMIC?

• Cloudflare only caches specific file extensions by default (Images, CSS, JS).
• To cache HTML or API responses, you must create a Cache Rule (Module 11).

Analyzing TTFB (Time to First Byte)

TTFB is the time it takes for the browser to receive the first byte of data from the server.

1. The cdn-cgi/trace tool

Visit https://your-domain.com/cdn-cgi/trace to see:

• colo: Which Data Center you hit (e.g. SFO).
• http: Protocol version (e.g. http/3).
• warp: Whether you are on the WARP network.

2. The Server-Timing Header

Cloudflare can send detailed timing information in the response headers.

• Enable at: Speed → Optimization → Content Optimization → Server Timing.

This adds a server-timing header you can see in Chrome DevTools:

• cf-cache-latency: Time spent in Cloudflare's cache layer.
• cf-origin-request: Time spent waiting for your origin server.

Debugging Network Latency

If the connection itself is slow:

1. Peering: Ensure your ISP has good peering with Cloudflare in your region.
2. Local Firewall/MTU: Occasionally, local network MTU settings can cause packet fragmentation with UDP protocols like HTTP/3.
3. DNS Resolution: Use dig +trace example.com to see how long DNS resolution is taking.

Performance Anti-Patterns

• Cache-Control: private: If your origin sends this, Cloudflare will never cache the resource. Ensure your origin sends public for cacheable assets.
• Vary Headers: Avoid Vary: User-Agent. This creates a separate cache entry for every single browser type, effectively destroying your cache hit ratio.
• Unoptimized Images: Loading 5MB JPEGs will slow down a site regardless of how fast the CDN is. Use Brotli and consider an image optimization service.

Key Takeaways

• Check CF-Cache-Status header first for any performance issue.
• Use cdn-cgi/trace to verify you are hitting the nearest Data Center.
• Enable Server Timing for granular visibility into where time is spent.
• Origin TTFB is often the biggest bottleneck — check your server performance.
• Avoid Vary headers that fragment the cache.

What's Next

• Continue to Reference and Cheatsheet for a summary of headers and status codes.