Measure network performance by resource timing API

Yu Liang
Yu Liang
Sep 30, 2017 · 5 min read
Image for post
Image for post

Introduction

This article will focus on what resource timing API is and how to use it to measure the network performance. In the end, we will give some key points we wish we knew when we get started. Before we get into it, we should let you know there are some pretty cool services like Webpagetest, ThousandEyes that aim to provide timing metrics of network performance or benchmark for CDN providers. But, we think it will be more interesting if we can collect real world data from our users.


Resource loading phases

Image for post
Image for post
From https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API

Let’s start with resource loading phases. The figure above gives us a clear picture about what stages browser has to go through when it fetches the resource.

Redirect

App Cache

DNS

TCP

If SSL handshake is required, it will be included in this phase as well.

Request

Response


Resource Timing API

var resources = performance.getEntriesByType("resource");

The resources is an array of PerformanceResourceTiming objects. The PerformanceResourceTiming object contains the URL of the requested resource, timing metrics and resource size data. The browser has a resource timing buffer to hold PerformanceResourceTiming objects. Whenever the browser starts to fetch a resource, it will create a new PerformanceResourceTiming object and store into the buffer until the buffer is full.

Image for post
Image for post
Properties of PerformanceResourceTiming object.

With the help of the properties of resource timing, you can calculate the amount of time the resource loading phases take.

  • redirection: redirectEnd — redirectStart
  • DNS lookup: domainLookupEnd — domainLookupStart
  • TCP handshake: connectEnd — connectStart
  • response: responseEnd — responseStart

The following example illustrates using these properties to calculate loading times.


Tips to use resource timing API

Why the properties are 0?

  • redirectStart, redirectEnd
  • domainLookupStart, domainLookupEnd
  • connectStart, connectEnd, secureConnectionStart
  • requestStart
  • responseStart

If you see these properties are 0, don’t be too surprise, that’s because the resource’s domain doesn’t match your domain. To permit these values to be shared, server should haveTiming-Allow-Origin HTTP header with a value to tell browser what origins can get the timestamp value. You can specify Timing-Allow-Origin: * to permit all origins to see the timing detail.

Can’t find the performance entry of the resource

Please see clearResourceTimings() method to remove all the entries in the buffer and setResourceTimingBufferSize() method to adjust the buffer limit. Theresourcetimingbufferfull event will be fired as well when the buffer is full. With the help of this event, you can set up an event handler to clear the entries when the buffer reaches its limit.

Wait, where is requestEnd?

Completion of sending the request from the user agent does not always indicate the corresponding completion time in the network transport, which brings most of the benefit of having such an attribute.

Some user agents have high cost to determine the actual completion time of sending the request due to the HTTP layer encapsulation.

We were wondering the time elapsed between the completion of sending HTTP request and the time when the browser get the first byte. But, it seems like no way to get it.

Why some properties are gone?

What about the resources loaded within the iframe?


Conclusion

KonoEngineer

Some technical posts about Web, Android, iOS, Backend…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store