El paso a paso o código que verás en este post es la solución más fácil y efectiva que hallamos a tu duda o dilema.
Solución:
Es posible hasta cierto punto, pero no será realmente preciso, la idea es cargar la imagen con un tamaño de archivo conocido y luego en su onload evento mida cuánto tiempo pasó hasta que se activó ese evento y divida este tiempo en el tamaño del archivo de imagen.
El ejemplo se puede encontrar aquí: Calcular la velocidad usando javascript
Caso de prueba aplicando la solución sugerida allí:
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg";
var downloadSize = 4995374; //bytes
function ShowProgressMessage(msg)
if (console)
if (typeof msg == "string")
console.log(msg);
else
for (var i = 0; i < msg.length; i++)
console.log(msg[i]);
var oProgress = document.getElementById("progress");
if (oProgress)
var actualHTML = (typeof msg == "string") ? msg : msg.join("
");
oProgress.innerHTML = actualHTML;
function InitiateSpeedDetection()
ShowProgressMessage("Loading the image, please wait...");
window.setTimeout(MeasureConnectionSpeed, 1);
;
if (window.addEventListener)
window.addEventListener('load', InitiateSpeedDetection, false);
else if (window.attachEvent)
window.attachEvent('onload', InitiateSpeedDetection);
function MeasureConnectionSpeed()
var startTime, endTime;
var download = new Image();
download.onload = function ()
endTime = (new Date()).getTime();
showResults();
download.onerror = function (err, msg)
ShowProgressMessage("Invalid image, or error downloading");
startTime = (new Date()).getTime();
var cacheBuster = "?nnn=" + startTime;
download.src = imageAddr + cacheBuster;
function showResults()
var duration = (endTime - startTime) / 1000;
var bitsLoaded = downloadSize * 8;
var speedBps = (bitsLoaded / duration).toFixed(2);
var speedKbps = (speedBps / 1024).toFixed(2);
var speedMbps = (speedKbps / 1024).toFixed(2);
ShowProgressMessage([
"Your connection speed is:",
speedBps + " bps",
speedKbps + " kbps",
speedMbps + " Mbps"
]);
JavaScript is turned off, or your browser is realllllly slow
La comparación rápida con el servicio de prueba de velocidad “real” mostró una pequeña diferencia de 0,12 Mbps cuando se usa la imagen grande.
Para garantizar la integridad de la prueba, puede ejecutar el código con la limitación de la herramienta de desarrollo de Chrome habilitada y luego ver si el resultado coincide con la limitación. (el crédito es para el usuario 284130 :))
Cosas importantes a tener en cuenta:
-
La imagen que se utiliza debe estar correctamente optimizada y comprimida. Si no es así, la compresión predeterminada en las conexiones por parte del servidor web podría mostrar una velocidad mayor de lo que realmente es. Otra opción es utilizar un formato de archivo no comprimible, por ejemplo, jpg. (gracias a Rauli Rajande por señalar esto y a Fluxine por recordármelo))
-
Es posible que el mecanismo de detección de caché descrito anteriormente no funcione con algunos servidores CDN, que se pueden configurar para ignorar la consulta. string parámetros, por lo tanto, es mejor configurar los encabezados de control de caché en la imagen misma. (gracias orcaman por señalar esto))
Bueno, esto es 2017, por lo que ahora tiene la API de información de red (aunque con un soporte limitado en todos los navegadores a partir de ahora) para obtener algún tipo de estimar información de velocidad de enlace descendente:
navigator.connection.downlink
Esta es una estimación del ancho de banda efectivo en Mbits por segundo. El navegador realiza esta estimación a partir del rendimiento de la capa de aplicación observado recientemente en las conexiones activas recientemente. No hace falta decir que la mayor ventaja de este enfoque es que no necesita descargar ningún contenido solo para calcular el ancho de banda/velocidad.
Puedes ver esto y un par de otros relacionados attributes aquí
Debido a su compatibilidad limitada y las diferentes implementaciones en los navegadores (a partir de noviembre de 2017), recomiendo encarecidamente leer esto en detalle
Como describo en esta otra respuesta aquí en StackOverflow, puede hacer esto cronometrando la descarga de archivos de varios tamaños (comience poco a poco, aumente si la conexión parece permitirlo), asegurándose de que encabezados de caché y tal que el archivo realmente se lea desde el servidor remoto y no se recupere del caché. Esto no requiere necesariamente que tenga un servidor propio (los archivos pueden provenir de S3 o similar), pero necesitará algún lugar de donde obtener los archivos para probar la velocidad de conexión.
Dicho esto, las pruebas de ancho de banda en un punto en el tiempo son notoriamente poco confiables, ya que se ven afectadas por otros elementos que se descargan en otras ventanas, la velocidad de su servidor, los enlaces en el camino, etc., etc. Pero puede tener una idea aproximada utilizando este tipo de técnica.