Comment détecter la vitesse de connexion avec JavaScript

La vitesse de connexion est le taux auquel les données circulent entre deux ordinateurs à travers un réseau, comme Internet. La vitesse de connexion est mesurée en bits par seconde (bps), mais est généralement exprimée en kilobits (1024 bits) par seconde (kbps, typique pour les connexions modem) ou en mégabits (1024 kilobits) par seconde (Mbps, typique pour les connexions haut débit). Créer une page web avec JavaScript pour mesurer et calculer la vitesse de connexion est un outil d'administration utile pour la surveillance du réseau et de la connexion Internet que vous pouvez exécuter directement dans votre navigateur web. Vous pouvez également l'utiliser pour détecter la connexion de vos visiteurs et décider d'envoyer la version intensive en bande passante ou la version allégée de votre contenu.

Étape 1

Ouvrez votre page web à laquelle vous souhaitez ajouter le JavaScript de détection de vitesse de connexion dans votre éditeur de texte.

Étape 2

Ajoutez les balises de script de début et de fin dans la zone d'en-tête de la page web (après la balise de début mais avant la balise de fin), par exemple :

Étape 3

Ajoutez le code suivant entre les balises de script de début et de fin, en remplaçant « monimage.jpg » par le nom du fichier de l'image que vous souhaitez utiliser pour le test de vitesse. La partie « ?n= » + Math.random() de l'adresse qui est construite et assignée à imageAddr trompe le navigateur pour qu'il récupère l'image à chaque fois au lieu d'utiliser une version mise en cache localement. Utilisez une image d'une taille de fichier d'environ 200 kilooctets.

var imageAddr = « monimage.jpg » + « ?n= » + Math.random() ;

Étape 4

Ajoutez le code suivant sur la ligne suivante du script pour créer les variables stockant l'heure de début du test, l'heure de fin et la taille du téléchargement. Définissez « downloadSize » sur la taille du fichier image en octets.

var startTime, endTime GO var downloadSize = 200000 ;

Étape 5

Ajoutez le code suivant pour configurer l'image qui sera téléchargée pour le test. « download » est configuré comme un objet Image. L'action pour capturer la fin du téléchargement est assignée pour s'activer lorsque le téléchargement de l'image se termine.

var download = new Image() ;
download.onload = function() {
endTime = (new Date()).getTime() ;
showResults () GO }

Étape 6

Ajoutez le code suivant qui exécute le test de vitesse. L'heure actuelle est capturée dans startTime. L'adresse de l'image assignée à download.src démarre le téléchargement de l'image.

startTime = (new Date()).getTime() ; download.src = imageAddr ;

Étape 7

Ajoutez la fonction suivante au script qui calcule et affiche les résultats du test de vitesse. D'abord, elle calcule la durée, en convertissant les millisecondes en secondes. Ensuite, elle convertit la taille du téléchargement en bits, calcule la vitesse de téléchargement, et convertit la vitesse en kbps et Mbps. Finalement, elle affiche une boîte de message avec les résultats.

function showResults () { var duration = Math.round((endTime - startTime) / 1000) ; var bitsLoaded = downloadSize * 8 GO var speedBps = Math.round(bitsLoaded / duration) GO var speedKbps = (speedBps / 1024).toFixed(2) GO var speedMbps = (speedKbps / 1024).toFixed(2) GO alert (« Your connection speed is: \n » + speedBps + « bps\n » + speedKbps + « kbps\n » + speedMbps + « Mbps\n ») GO }

Étape 8

Ouvrez la page dans votre navigateur, et testez-la pour vous assurer que le script fonctionne correctement. Il peut falloir quelques secondes pour que la boîte de message apparaisse avec les résultats du test.

Conseil

Le JavaScript mesure la vitesse entre l'ordinateur visualisant la page web et le site hébergeant l'image utilisée pour le test. Si vous testez la connexion vers votre propre site web, hébergez l'image sur votre propre site. Testez la vitesse de connexion générale en fournissant l'adresse d'une image hébergée sur un site avec beaucoup de bande passante et de vitesse comme flickr ou Amazon.