Lately I had to do some client-side performance measurements of a website. In the old days I would have to use the now() method of the Date object, however, we are now provided with the Performance API with some very handy methods. Let’s check together my three favorite measurements.

Before we get started, let us take a look at the following diagram which contains the order of the properties involved in the time measurement of a request.

Image taken from https://www.w3.org/TR/navigation-timing/

Count the time between sending a request to the server and receiving the first bit

This is very handy when you want to count the server-time needed for an AJAX call.

// This will get the first AJAX call that was made. You can made the search for specific by matching the name property which contains the URL of the AJAX call
var perf = performance.getEntriesByType('resource').find(res => res.initiatorType = 'xmlhttprequest');

// Check the diagram for what is measured here.
var serverTime = perf.responseStart - perf.requestStart;

Count the time between sending a request to the server and the rendering of the information received on the UI

The previous call was the server-side time needed of a request. This request is the complete time needed for the server call and the client-side rendering of the information. This is how we can measure the total time needed for an AJAX call. For that we use the duration property.

var perf = performance.getEntriesByType('resource').find(res => res.initiatorType = 'xmlhttprequest');
var ajaxCallDuration = perf.duration;

Count the initial total time for the page to load

For this we are going to use the following code. The LoadEventEnd property is the last property in the Request-Response order (see the previous diagram) and redirectStart counts for the first measurement in the diagram.

// There is only one item in the array for navigation
var perf = performance.getEntriesByType('navigation')[0];

var totalLoadTime = perf.loadEventEnd - perf.redirectStart;