Publicado em por Paulo Künzel

Estimando a velocidade de download com Imagens

Neste post será mostrado uma forma de estimar a velocidade de download utilizando uma imagem e algumas linhas de código JavaScript. A ideia do algoritmo é a de:

  • Fornecer uma imagem de tamanho grande para calcular de forma mais confiável.
  • Iniciar um contador um passo antes de baixar a imagem.
  • Baixar a imagem.
  • Encerrar o contador no momento que a imagem termina.
  • Calcular o resultado em MBps e Mbps.

O Código HTML

Abaixo o segue o código HTML. Como você pode ver, para manter tudo simples, serão utilizadas apenas algumas linhas de código e a exibição de resultados será de apenas um texto com os dados

<!DOCTYPE html>
<html>
<head>
    <title>Teste de Velocidade</title>
    <meta charset="utf-8" />
</head>
<body>
    <!-- O botão que irá iniciar o teste -->
    <button onclick="iniciarTeste()">Iniciar</button>

    <!-- Tag de paragrafo que exibirá os resultados -->
    <p id="progresso"></p>
    
    <script src="main.js"></script>
</body>
</html>

 

O Código JavaScript

A explicação do código JavaScript abaixo está dentro dos comentários de cada trecho.

// Variaveis para controlar o inicio e o fim do download
let inicioDownload;
let fimDownload;

// Variavel que guarda os dados da imagem que serão utilizados
const imagem = {
    // Caminho da imagem. Utilize o caminho da sua imagem
    caminho: "coffe-cup.jpg",

    // O tamanho da imagem em megabytes
    tamanho: 6.877555
};

// Inica o teste de Download
// Se outros recursos estiverem sendo baixados
function iniciarTeste() {
    mostrarMensagem("Efetuando teste de Download...");
    window.setTimeout(medirConexao(), 1);
}


// Função auxiliar que exibe mensagens na tela
function mostrarMensagem(messagem) {
    // Se a variavel mensagem for uma string, exibirá ela como veio,
    // Se a variavel for um vetor, exibirá cada linha quebrado por <br/>
    let mensagemHTML = (typeof messagem == "string") ? messagem : messagem.join("<br />");
    document.getElementById("progresso").innerHTML = mensagemHTML;
}

// Função que efetivamente mede a conexao de velocidade
function medirConexao() {
    // Cria o objeto de imagem que iremos calcular o tempo de download
    let imagemTeste = new Image();

    // No envento de carregamento da emnsagem,
    // para o contador e exibe o os resultados
    imagemTeste.onload = function () {
        endTime = new Date().getTime();
        exibirResultados();
    }

    // Inicia o contador 
    startTime = new Date().getTime();
    // cria uma controlador apra evitar carregar um caminho de imagem que ja está em cache
    let cacheBuster = "?nnn=" + startTime;
    // inicia a imagem
    imagemTeste.src = imagem.caminho + cacheBuster;
}

// Exibe os resultados caculados em Megabytes por segundo
// e em Megabits por segundo
function exibirResultados() {
    // converte o tempo de milisegundos para segundis
    let duracao = (endTime - startTime) / 1000;
    // calcula o tempo que levou para baixar a imagem,
    // arredondando para duas casas decimais
    let velocidadeMbps = (imagem.tamanho / duracao).toFixed(2);
    
    mostrarMensagem([
        "A Velocidade da conexão é de:",
        velocidadeMbps + " MBps",
        (velocidadeMbps * 8) + " Mbps"
    ]);
}

Conclusão

Após rodar os testes algumas vezes, foi possível observar as seguintes coisas.

  1. O resultado sempre se apresentou abaixo do que seria a capacidade da internet na minha casa.
  2. Caso outras páginas estivessem sendo acessadas, o resultado era muito inferior ao esperado.

Apesar dos itens acima terem sido esperados, foi interessante compara-los com sites que exibem a velocidade da internet para ver o preciso é o teste em relação a eles.

Deixe um comentário