🎉 Requestly joins BrowserStack to build the future of application testing. Read more

HTTP Headers

Server Timing

HTTP Header

The HTTP Server-Timing response header conveys key performance metrics related to the request-response cycle. This header allows server developers and users to analyze backend server timings, such as database read/write operations, CPU processing time, and file system access, directly within browser developer tools or the PerformanceServerTiming interface.
By exposing these metrics, it becomes easier to pinpoint performance bottlenecks and optimize server-side processes for improved application responsiveness.

Syntax

The <timing-metric> has a name and can optionally include a duration and a description. Here are some examples:

  • Server-Timing: missedCache

    A metric with just a name

  • Server-Timing: cpu;dur=2.4

    A metric with a specified duration

  • Server-Timing: cache;desc="Cache Read";dur=23.2

    A metric with a description and duration

  • Server-Timing: db;dur=53, app;dur=47.2

    Multiple metrics with duration values

Directives

Directives guide the behavior and reporting of server metrics. One common directive is the <timing-metric> component, which specifies a list of metrics with detailed components separated by semicolons.

  • The <name> component represents a concise, implementation-specific identifier for the metric, such as cacheHit. This name should not contain spaces or special characters.
  • The <duration> component is optional and indicates the duration of the metric. It is formatted as dur= followed by the value in a string, for example, dur=23.2.
  • The <description> component is also optional and provides additional context. It appears as desc= followed by the description token or a quoted string, such as desc=prod or desc="DB lookup".

It is recommended to keep names and descriptions brief, utilizing abbreviations where suitable and omitting optional values to reduce HTTP data overhead.

Example

Privacy and security

The Server-Timing header can reveal sensitive information about the application and infrastructure. It is important to choose carefully which metrics to send, when to send them, and who has access, depending on your use case. For example, you might decide to restrict metrics visibility to authenticated users only, with no data exposed on public responses.

PerformanceServerTiming interface

The Server-Timing header metrics appear in browser developer tools, and the PerformanceServerTiming interface allows tools to automatically gather and analyze these metrics via JavaScript. This interface is limited to the same origin, but you can specify permitted domains using the Timing-Allow-Origin header. Note that this interface is only available in secure contexts (HTTPS) in some browsers.

The Server-Timing header components correspond to the PerformanceServerTiming properties as follows:

  • “name” maps to PerformanceServerTiming.name
  • “dur” maps to PerformanceServerTiming.duration
  • “desc” maps to PerformanceServerTiming.description

Sending a metric using the Server-Timing header

The example below demonstrates a response that includes a custom metric custom-metric with a duration of 123.45 milliseconds and a description:

Server-Timing: custom-metric;dur=123.45;desc="My custom metric"

Server-Timing as HTTP trailer

In this example, the Trailer header indicates that a Server-Timing header will follow the response body. A metric custom-metric with a duration of 123.4 milliseconds is included:

HTTP/1.1 200 OK
Transfer-Encoding: chunked
Trailer: Server-Timing

--- response body ---
Server-Timing: custom-metric;dur=123.4

Note:
Only browsers’ DevTools can display Server-Timing headers as HTTP trailers in the Network → Timings tab. The Fetch API cannot access HTTP trailers. For more details, see browser compatibility.

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Server-Timing header. This is especially useful for testing how your server reports performance metrics or debugging server-side timing information during development. Steps to Modify the Server Timing Header:

  1. Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
  2. Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
  3. Add a new header modification:
    • Under “Action”, select “Add” or “Override”.
    • In the “Header Name” field, enter Server-Timing.
    • In the “Header Value” field, enter your desired timing metrics (e.g., db;dur=53, cpu;dur=47).
  4. Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
  5. Save the rule.

Once set up, Requestly will inject the Server-Timing header into all matching requests, allowing you to test how your application handles server performance metrics or customize timing reports for better debugging.

Modifying the Server Timing header helps you simulate and test server performance data that browsers use to diagnose backend issues. This way, you can ensure your monitoring tools and client-side metrics display accurate and meaningful information.