So I have read a few articles now about how if you have an image of a known size and then you time how long it takes to download that image, you can infer connection-speed/bandwidth.
My thought is, why not use the data from window.performance.getEntries()
and take the total transferSize
/ total duration
as the sample size would be much greater and I wouldn't have to instrument any of my own timing or inject any extra arbitrary images as measurement fodder.
Here is what I have done so far just to proof it out.
First I get all the entries with type, size, and duration in tabular-esque format.
window.performance.getEntries().map(i => i.initiatorType + ' ' + i.transferSize + ' ' + i.duration );
Then I copy and paste it into notepad++ to do a little regex to clean it up before I stuff it in a spreadsheet.
From here I am able to paste into Excel.
I am filtering out undefined
& navigation
initiatorType, and 0
for both transferSize & duration.
And a few calculated columns just to get everything into the correct Units.
- transferSize in MB
=(B3/1000000)
- duration in Seconds
=(C3/1000)
- MBps
=(D3/E3)
Question: Is my math correct? What flaws are there in my logic?
My plan is to codify this, but first I wanted a way to present my logic in a easy to follow layout before I proceed.
Motivation and Sources:
How to detect internet speed in JavaScript? https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry