My three favorite client-side performance measurements you can do with the Performance API
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
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'); var totalLoadTime = perf.loadEventEnd - perf.redirectStart;