Cloudflare Server-Timing

RUMvision can collect Cloudflare timing data when your website exposes it through the Server-Timing response header.

This helps you understand whether slow server response times are caused by Cloudflare edge processing, your origin server, or cache behavior.

If your site is not exposing these headers yet, you can add them in Cloudflare with a Response Header Transform Rule.

Add Server-Timing via Cloudflare

Recommended fields

Below are the recommended fields to expose. Once these fields are exposed and Cloudflare is selected as the CDN in your tech stack settings and enabled the Cloudflare checkbox, we will automatically collect them. However, as Cloudflare offers more fields you're free to add more and collect them individually.

Where to implement

When logged into Cloudflare, you can follow this direct link to end up at the right configuration page. Alternatively, follow the steps below to configure this for a specific website:

• Go to Rules -> Overview
• Click "Create Rule"
• select "Response Header Transform Rules" in the dropdown

See this screenshot for visual support as to where to find these steps. A new page with a form will appear.

Rule to implement

On that form, fill in the following information:

• Rule name (required)
  Server-Timing for RUM
• If incoming requests match…
  select "All incoming requests" (2nd select box)

Then, add the following response header:

prettify?concat(
  "cfCacheStatus;desc=", http.response.headers["cf-cache-status"][0],
  ",cfEdge;dur=", to_string(cf.timings.edge_msec),
  ",cfOrigin;dur=", to_string(cf.timings.origin_ttfb_msec),
  ",cfWorker;dur=", to_string(cf.timings.worker_msec),
  ",cdn-pop;desc=", substring(cf.ray_id, -3),
  ",http_status_code;desc=", to_string(http.response.code)
)

You can also add other headers like Cf-Apo-Via when using Cloudflare's APO solution.

Do note that the concat function accepts a maximum of 16 arguments.

Don't forget to add this rule by clicking the blue "Deploy" button.

If you're not using Cloudflare workers, you can omit that line from the list before pasting it into your Cloudflare HTTP Response Header Value form field.

See the following screenshot for a visual representation of these steps:

Once created, you should see it listed in your Rules Overview, as illustrated in this example screenshot.

Testing the outcome

Next step is testing the outcome. You could either wait for data to arrive in your RUMvision dashboard, or proactively test the outcome using the DevTools of your preferred browser.

Expected outcome

After deploying the rule, your HTML document should return a Server-Timing header similar to this:

Server-Timing: cfCacheStatus;desc=MISS, cfEdge;dur=12, cfOrigin;dur=248

For a cached response, cfOrigin may be 0, because Cloudflare did not need to contact the origin server.

Server-Timing: cfCacheStatus;desc=HIT, cfEdge;dur=8, cfOrigin;dur=0

Check the response headers

To verify the setup:

1. Open your website in Chrome or Edge.
2. Open DevTools.
3. Go to the Network tab.
4. Reload the page.
5. Click the main HTML document request.
6. Check the Response Headers section.
7. Look for server-timing.

Test in DevTools Console

As the browser exposes Server-Timing values through the PerformanceServerTiming interface, you can also test it in the browser console by running the following JavaScript:

prettify?const navEntries = window.performance.getEntriesByType('navigation');
console.table( navEntries[0].serverTiming );

You can save snippets like these directly in DevTools (under the Sources panel) to easily reuse them later.

After running this in your DevTools Console, you should see a table similar to the one below:

Important

In general, be sure to:

• Always test on staging environment before deploying these steps to a production environment.
• Avoid exposing sensitive internal details. Server-Timing data is visible in the browser, so only expose metrics that are safe to share with visitors and third-party scripts.

Cloudflare notes

If your origin already sends a Server-Timing header, using Cloudflare’s Set dynamic operation may overwrite it. In that case, either combine the values at your origin or configure Cloudflare carefully so you do not remove useful existing metrics.

• PreviousAWS Cloudfront
• back to parent
• NextFastly