Ever wanted to grab this data? *This* is your chance!
How it works
Loading a resource in the browser can be broken down into different phases--from initiating a request all the way to receiving the response. Most of the time you probably don't care about any of the phases in between. But when you have a performance bottleneck or are getting 404s in production, your opinion may change.
The phases of a network request.
Image by MDN is licensed under CC-BY-SA 2.5.
As you can see, your browser is tracking a lot more than just
How to use it
You can see there's a lot of interesting info in here. A lot of it is self-explanatory. You're also
going to see a lot of zeroes--some of the things tracked likely won't apply to
every one of your requests. In this example I'm looking at the styles from our blog hosted
on my machine. There are no redirects happening so you can see that both
redirectEnd are both 0.
With all of these fields there are multiple ways you can calculate how long a request takes. Which method you choose is going to be dependent on the context of your use case--or more likely, what you're debugging!
Request Size API
Many times going hand in hand with request times are resource sizes. This is something that can be surprisingly tricky to debug. Luckily for you the Resource Timing API is here to help.
transferSize: Size of the resource including header--in other words, the whole enchilada, rice and beans included.
encodedBodySize: Size of payload body before removing any encoding--the enchilada, rice and beans removed.
decodedBodySize: Size of payload body after removing any encodings--the enchilada, rice and beans removed with no Boom-Boom sauce (though I must argue that this defeats the purpose).
Before you go
If you want to track Resource Timing API data and other useful metrics about your app, you should check out our product here: https://www.userbugreport.com/. It's free to test out and it costs about as much as a pair of Chicka-Chicka Boom-Boom Enchiladas from Chuy's--and trust us when we say that User Bug Report has far fewer calories.
Behold! The Chicka-Chicka Boom-Boom Enchilada.
Check out these additional resources for more info on the Resource Timing API.