Tracking your visitors effective connection speed details

I know this is just currently a draft but being it available on Chrome, Edge and Opera ( or any chrome based browser ) make this really usefull in my opinion.

In those browsers, there’s a API that allows to get the details about the current connection of the current user. We cab query some info like the current “estimated” connection link, the round-trip ( latency ), based on the recently observed requests by the browser.

All these details can be queried via the Network Information API on the supported browsers. I know if not much widly adopted yet, but according to canIuse it’s supported by around a 70% of browser globally, it’s not perfect but I think it’s enough, with the time more browser should be end adding support for it.

We can query (at this moment) for the following details:

PropertyValue
downlink
downlinkMax (available in workers)
rttround-trip time in milliseconds
effectiveTypeslow-2g , 2g , 3g , 4g
type (available in workers)bluetooth, cellular, ethernet, none, wifi, wimax, other,unknown

On this we’ll focusing on the effectiveType since is the attribute that is widly available on the browsers. We need to have in mind that is NOT the real connection type of the user, but the current “effectiveconnection type. Meaning that is an estimation based on the measured network performance for the previous/current requets. This value is actually calculated based on the maximun download speeds and the minumun RTT values recently observed.

This mean that an user may really be under a fiber connection, connected via Wifi with a very bad link and the effectiveType may report 2g. but since we are talking about the “effective” we should be fine

This reported value is calculated based on the following table:

effectiveType (ECT)Min. RTTMax. Down
slow-2g2000ms50kbps
2g1400ms70kbps
3g270ms700kbps
4g0msinf.
https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type

Code Snippet

(function() {
    var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    return {
        effectiveType: connection.effectiveType,
        rtt: connection.rtt,
        downlink: connection.downlink
    };
}
)();

onChange Event

We can also listen for connection info changes, using the following listener:

navigator.connection.addEventListener('change', ()=>{
  dataLayer.push({
     'event': 'connection-changed'
  });
});

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.