Detect whether Internet speed is Fast or Slow using JavaScript

In this article,  we are providing you with a code snippet which you can include in any webpage where you want to display internet speed whether it is slow or fast.

This feature can be useful if you webpage contains some element that needs a better internet connection as we can notify users about the same.

Basic Idea :

The basic idea here is to load an image and see how much time it takes to load the image.

If it takes more than 5 seconds, then I have rated it as too slow
If it takes more than 3 seconds, it is a bit slow
If the image loads within less than 3 seconds, the internet looks good

You can alter and change these thresholds as per your requirement as this is just for demo purpose.

Source Code :

<style type="text/css">
    #connection-message{
        position: fixed;
        bottom:0;
        color:#fff;
        text-align: center;
        z-index: 9999;
        width:100%;
    }
</style>

<div id="connection-message"></div>


<script type="text/javascript">
var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var loadtime = new Date().getTime() - startTime;
    checkConnectionSpeed(loadtime);
};
img.src = "https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?"+startTime;

function checkConnectionSpeed(millisecond) {
    var x = document.getElementById("connection-message");
    if (millisecond > 5000) {
        x.style.backgroundColor = 'red';
        x.innerHTML = 'Your Internet Connection is too slow';
    }else if(millisecond > 3000){
        x.style.backgroundColor = 'orange';
        x.innerHTML = 'Your Internet Connection is a bit slow';
    }else{
        x.style.backgroundColor = 'green';
        x.innerHTML = 'Your Internet Connection looks good';
    }
}
</script>