javascriptperformanceresource-timing-api

Get transferred size of a resource using JavaScript


I'm trying to measure page load performance of real website users. To make better sense of the data, I'd like to segment the data by whether or not the cache was primed.

So I don't need to know before loading a resource if it was in the cache. It's enough to measure after the fact.

At least in Chrome and Firefox, the dev tools "network" tab has a column which displays the transferred size. Is it possible to get this info with JavaScript?

The Resource Timing API appears to have a provision for exactly this case ("transferSize must return 0 if resource retrieved locally"), but no browser has implemented it yet.

The fact that the dev tools display this information makes me wonder if it's accessible somehow. Any ideas?


Solution

  • It appears that whilst the Resource Timing API is supported in most modern browsers, recent changes to the Resource Timing API specification, such as the transferSize property, have not yet been implemented.

    Here are the relevant bugs reporting this for Firefox and for Chromium.

    As mentioned in the comments to the question, it appears that this has been addressed in Firefox and will be released in Firefox 45. I have confirmed that transferSize is currently available in the Firefox Developer Edition (v45.0a2).