HTTP Headers
Server Timing
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 ascacheHit
. This name should not contain spaces or special characters. - The
<duration>
component is optional and indicates the duration of the metric. It is formatted asdur=
followed by the value in a string, for example,dur=23.2
. - The
<description>
component is also optional and provides additional context. It appears asdesc=
followed by the description token or a quoted string, such asdesc=prod
ordesc="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:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- 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).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-api.com/*).
- 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.
Table of Contents
- No headings found.