Cómo detectar la velocidad de conexión con JavaScript

La velocidad de conexión es la tasa a la que fluyen datos entre dos computadoras a través de una red, como Internet. Se mide en bits por segundo (bps), pero suele expresarse en kilobits por segundo (kbps, típico en conexiones por módem) o megabits por segundo (Mbps, típico en banda ancha). Crear una página web con JavaScript para medir y calcular la velocidad de conexión es una herramienta de administración útil para monitorear conexiones de red e Internet directamente desde el navegador. También puedes usarla para detectar la conexión de los visitantes de tu web y decidir si enviarles la versión ligera o la que consume más ancho de banda.

Implementación del test de velocidad

Paso 1

Abre la página web donde quieres añadir el script de detección de velocidad en tu editor de texto.

Paso 2

Añade las etiquetas de inicio y fin de script en la cabecera de la página (después de <HEAD> y antes de </HEAD>), por ejemplo:

<script type="text/javascript">
// código aquí
</script>

Paso 3

Añade el siguiente código entre las etiquetas de script, reemplazando "miimagen.jpg" por el nombre del archivo de imagen para el test. La parte "?n=" + Math.random() engaña al navegador para que descargue la imagen cada vez en lugar de usar la caché. Usa una imagen de unos 200 kilobytes.

var imageAddr = "miimagen.jpg" + "?n=" + Math.random();

Paso 4

Añade el siguiente código en la línea siguiente para crear variables que almacenen el tiempo de inicio, fin y tamaño de descarga. Establece downloadSize al tamaño del archivo en bytes.

var startTime, endTime;
var downloadSize = 200000;

Paso 5

Configura la imagen que se descargará para el test. download se crea como objeto Image. La acción para capturar el fin de la descarga se asigna al evento onload.

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

Paso 6

Ejecuta el test capturando la hora actual en startTime. Asignar la dirección de la imagen a download.src inicia la descarga.

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

Paso 7

Añade la función que calcula y muestra los resultados. Convierte milisegundos a segundos, el tamaño a bits, calcula la velocidad y la convierte a kbps y Mbps. Finalmente muestra un cuadro de alerta con los resultados.

function showResults() {
    var duration = Math.round((endTime - startTime) / 1000);
    var bitsLoaded = downloadSize * 8;
    var speedBps = Math.round(bitsLoaded / duration);
    var speedKbps = (speedBps / 1024).toFixed(2);
    var speedMbps = (speedKbps / 1024).toFixed(2);
    alert("Tu velocidad de conexión es: \n" + speedBps + " bps\n" + speedKbps + " kbps\n" + speedMbps + " Mbps\n");
}

Paso 8

Abre la página en tu navegador y pruébala para verificar que el script funciona. Puede tardar unos segundos en aparecer el cuadro con los resultados.

Consejo

El JavaScript mide la velocidad entre el equipo que ve la página y el servidor que aloja la imagen de prueba. Si pruebas tu propia web, aloja la imagen en tu sitio. Para test general, usa una imagen en un sitio con mucho ancho de banda como Flickr o Amazon.