Server-Timing

The HTTP Server-Timing response header exposes one or more backend performance metrics for the request-response cycle, making server-side timing data visible in browser developer tools and the PerformanceServerTiming JavaScript interface.

Table of Contents

Usage
Directives
- name
- dur
- desc
Example
Takeaway
See also

Usage

Backend operations like database queries, template rendering, and cache lookups consume time invisible to the browser. The Server-Timing header surfaces these metrics alongside the response, giving developers a complete picture of where time was spent from server to screen.

Each metric has a name and optionally a duration in milliseconds and a human-readable description. The name is an implementation-specific token identifying the operation. The dur parameter records how long the operation took. The desc parameter provides context for developer tools and monitoring systems. Multiple metrics are comma-separated in a single header value.

The metrics appear in the browser's Network panel under the Timing tab and are accessible through the PerformanceResourceTiming.serverTiming property in JavaScript. This property returns an array of PerformanceServerTiming objects, each exposing name, duration, and description properties mapping directly to the header parameters.

For cross-origin resources, server timing entries are not exposed to the requesting origin unless the server also sends the Timing-Allow-Origin header. Without the timing header, the serverTiming array is empty for cross-origin requests.

The header is defined in the W3C Server Timing specification and is supported across all major browsers.

Note

The metrics exposed in Server-Timing are visible to anyone inspecting HTTP responses. Avoid including sensitive infrastructure details in metric names or descriptions on public endpoints. Consider restricting detailed metrics to authenticated responses or internal services.

Directives

name

A token identifying the metric. Names follow HTTP token syntax (no spaces or special characters). Common names include db, cache, app, render, cdn-cache, and api. Keep names short to minimize HTTP overhead.

dur

The dur parameter specifies the duration in milliseconds as a decimal number. Optional. When omitted, the metric signals an event or state without a measurable duration (like a cache hit indicator).

Server-Timing: db;dur=53

desc

The desc parameter provides a human-readable description. The value is either an unquoted token or a quoted string. Optional. Useful for labeling metrics in developer tools.

Server-Timing: cache;desc="Cache Read"

Example

A single metric name with no duration or description. This pattern signals a state (the response missed the cache) without measuring time.

Server-Timing: missedCache

A metric with a duration. The database query took 53 milliseconds.

Server-Timing: db;dur=53

A metric with both duration and description. The description appears in browser developer tools under the Timing tab.

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

Multiple metrics in a single header. The server reports database time, application logic time, and a cache status. Comma-separated entries keep all metrics in one header.

Server-Timing: db;dur=53, app;dur=47.2,
  cache;desc="HIT"

A CDN adding edge-level timing to origin metrics. The origin server measures its own processing, and the CDN edge node appends the cache status and edge processing time before delivering the response.

Server-Timing: origin;dur=120, cdn-cache;desc="HIT",
  edge;dur=2

Pairing Server-Timing with Timing-Allow-Origin exposes server metrics to cross-origin consumers. Without the timing header, the serverTiming array is empty for cross-origin resource entries.

Timing-Allow-Origin: *
Server-Timing: db;dur=53, render;dur=47

JavaScript access to server timing metrics using the PerformanceObserver API. Each PerformanceServerTiming object exposes name, duration, and description properties matching the header parameters.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    entry.serverTiming.forEach((metric) => {
      console.log(
        `${metric.name}: ${metric.duration}ms`
        + (metric.description
          ? ` (${metric.description})`
          : "")
      );
    });
  });
});
observer.observe({
  type: "resource",
  buffered: true
});

Takeaway

The Server-Timing header exposes backend performance metrics alongside the response, making server-side timing data accessible in browser developer tools and through the PerformanceServerTiming JavaScript interface. The Timing-Allow-Origin header is required to expose these metrics for cross-origin resources.