May 20, 2023
Server Timing is a Web-related mechanism that allows developers to add timing information to their HTTP responses. This feature is part of the Server-Timing API and is supported by most modern browsers.
The purpose of Server Timing is to provide developers with precise timing information about their server’s performance, which can be used to optimize their application’s performance. By analyzing the timing information provided by Server Timing, developers can identify and isolate performance bottlenecks in their application’s server-side code.
Server Timing works by adding timing information to HTTP responses in the form of key-value pairs, where the key is a user-defined label and the value is the duration of the corresponding operation, in milliseconds. These key-value pairs are added to the
Server-Timing header of the HTTP response.
To add timing information to an HTTP response, developers must first create an instance of the
PerformanceServerTiming interface, which is part of the Server-Timing API. This can be done using the
performance.getEntriesByType('navigation').serverTiming property, which returns an array of
Once an instance of
PerformanceServerTiming is created, developers can add timing information to it using the
addMetric() method. This method takes two arguments: a label, which is a string that identifies the operation being timed, and a duration, which is a number that represents the duration of the operation, in milliseconds.
Here’s an example of how to use Server Timing to add timing information to an HTTP response:
const serverTiming = performance.getEntriesByType('navigation').serverTiming; serverTiming.addMetric('database', 25); serverTiming.addMetric('render', 10);
In this example, we’re adding timing information for two operations: a database query that took 25 milliseconds to complete, and a rendering operation that took 10 milliseconds to complete.
Once the timing information is added to the
PerformanceServerTiming instance, it will be automatically included in the
Server-Timing header of the HTTP response. Here’s an example of what the
Server-Timing header might look like:
Server-Timing: database;dur=25, render;dur=10
In this example, we can see that the timing information for the database and rendering operations is included in the
Server-Timing header. The
dur parameter specifies the duration of each operation, in milliseconds.
Server Timing is supported by most modern browsers, including Chrome, Firefox, Edge, and Safari. However, it’s important to note that support for Server Timing may vary depending on the browser version and platform. Developers should always check the caniuse.com page for the latest information on browser compatibility.
Benefits of Server Timing
Server Timing provides several benefits for developers who are looking to optimize their application’s performance. Here are some of the key benefits of using Server Timing:
Precise Timing Information
Server Timing provides developers with precise timing information about their server’s performance. This information can be used to identify and isolate performance bottlenecks in their application’s server-side code. By analyzing the timing information provided by Server Timing, developers can gain insights into which operations are taking the longest to complete, and which operations might be causing performance issues.
Easy to Use
Server Timing is easy to use and requires no additional setup or configuration. Developers can add timing information to their HTTP responses using just a few lines of code. This makes it easy to integrate Server Timing into existing applications and workflows.
Server Timing is part of the standard Web API, which means that it’s supported by most modern browsers. This makes it easy for developers to use Server Timing across different browsers and platforms, without having to worry about compatibility issues.
Integration with Performance APIs
Server Timing integrates with other Performance APIs, such as the Navigation Timing API and the Resource Timing API. This allows developers to get a more complete picture of their application’s performance, by combining timing information from different sources.