Backend Performance in Chrome DevTools

Unlocking the Secrets of Chrome’s Network Panel

As a developer, understanding the intricacies of network request and response performance is crucial for optimizing your application’s speed and efficiency. Chrome’s network panel provides a wealth of information to help you do just that. In this article, we’ll explore the request lifecycle waterfall and show you how to pipe backend tracing information into the network panel.

Breaking Down the Request Lifecycle

By default, Chrome breaks down the life of a request into 8 parts:

1. Queueing and Stalled: The time a request needs to wait before being acted on by the browser.
2. DNS Lookup: The time spent resolving the domain name.
3. Initial Connection: The time spent establishing the initial connection.
4. SSL: The time spent setting up the SSL handshake.
5. Request Sent: The time it takes the browser to transmit the request to the server.
6. Waiting (Time to First Bite): The time the browser needs to wait to start receiving data from the server after making an initial request.
7. Content Download: The time it takes to receive the entire stream of bytes from the server.

Sending Backend Timings

The Waiting (TTFB) step can be a mystery, as the server could be doing any number of things when responding to a request. To shed some light on this process, Chrome has an API for sending custom timings from the server using the Server-Timing header.

Here’s an example of how to set up the Server-Timing header in a basic Node/Express server:
“`javascript
const express = require(‘express’);
const app = express();

app.get(‘/’, (req, res) => {
const timing = {
‘server-timing’: [
{ name: ‘db’, duration: 100 },
{ name: ‘api’, duration: 200 }
]
};
res.set(timing);
res.send(‘Hello World!’);
});
“`
Working with Resource Timings Programmatically

To analyze resource timings programmatically, you can use the performance.getEntriesByType('resource') method, which returns a list of resources and their respective timings.

For example:
javascript
const resources = performance.getEntriesByType('resource');
resources.forEach((resource) => {
console.log(resource.name, resource.duration);
});

By leveraging these tools and techniques, you can gain a deeper understanding of your application’s performance and make data-driven decisions to optimize its speed and efficiency.