Como pegar a velocidade da internet com JavaScript

Neste artigo você vai aprender a como obter a velocidade da internet com JavaScript, utilizaremos várias abordagens, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

A velocidade da internet é um fator crucial para uma experiência de navegação na web agradável e eficiente.

Em muitos casos, os usuários podem se deparar com problemas de carregamento lento ou tempos de resposta demorados em sites ou aplicativos da web devido à velocidade de internet insuficiente.

Para fornecer uma melhor experiência de usuário, é importante testar a velocidade da internet.

Neste artigo, exploraremos algumas maneiras de obter a velocidade da internet com JavaScript.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Usando o objeto Performance

O objeto Performance é uma interface nativa do JavaScript que permite acessar informações de desempenho do navegador, incluindo a velocidade da internet.

O objeto Performance contém uma propriedade chamada “timing” que fornece informações sobre o tempo de carregamento da página.

Usando esta propriedade, podemos obter a velocidade da internet.

function getVelocidadeInternet() {
  let timeStart = performance.timing.requestStart;
  let timeEnd = performance.timing.responseEnd;
  let tempoCarregamento = timeEnd - timeStart;
  let velocidadeInternet = (1024 / tempoCarregamento) * 8;
  return velocidadeInternet.toFixed(2) + " kbps";
}

Neste exemplo, estamos usando o objeto Performance para obter o tempo de carregamento da página e, em seguida, calculamos a velocidade da internet com base nesse tempo.

A velocidade é retornada como uma string formatada com duas casas decimais.

Usando a API Fetch

Outra maneira de obter a velocidade da internet com JavaScript é usando a API Fetch. A API Fetch permite que o navegador faça solicitações HTTP para obter dados da internet.

Podemos usar a API Fetch para fazer uma solicitação de teste e, em seguida, calcular a velocidade da internet com base no tempo de resposta.

function getVelocidadeInternet() {
  let timeStart = performance.now();
  fetch("https://example.com/teste").then(response => {
    let timeEnd = performance.now();
    let tempoResposta = timeEnd - timeStart;
    let velocidadeInternet = (1024 / tempoResposta) * 8;
    return velocidadeInternet.toFixed(2) + " kbps";
  });
}

Neste exemplo, estamos usando a API Fetch para fazer uma solicitação para um URL de teste e, em seguida, calculamos a velocidade da internet com base no tempo de resposta.

Usando a biblioteca speedtest.js

A biblioteca speedtest.js é uma biblioteca JavaScript que permite testar a velocidade da internet em tempo real.

A biblioteca é capaz de testar a velocidade de download e upload, além de fornecer outras informações de rede úteis.

speedtestNet.on('speedtest-done', function(speeds) {
  console.log("Velocidade de Download: " + speeds.download + " kbps");
  console.log("Velocidade de Upload: " + speeds.upload + " kbps");
});

Neste exemplo, estamos usando a biblioteca speedtest.js para testar a velocidade da internet. A biblioteca fornece informações sobre a velocidade de download e upload.

Instalando a biblioteca

No terceiro exemplo, usamos a biblioteca speedtest.js para testar a velocidade da internet.

É importante lembrar que para usar a biblioteca, ela precisa ser instalada antes de ser usada. Isso pode ser feito usando o gerenciador de pacotes npm ou outro gerenciador de pacotes.

Para instalar a biblioteca speedtest.js, você pode usar o seguinte comando no terminal:

npm install speedtest-net

Isso instalará a biblioteca speedtest.js e todas as suas dependências no seu projeto.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em resumo, a velocidade da internet é um fator importante para uma experiência de navegação agradável e eficiente.

Existem várias maneiras diferentes de obter a velocidade da internet em JavaScript, incluindo o uso do objeto Performance, a API Fetch e a biblioteca speedtest.js.

Cada uma dessas abordagens tem suas vantagens e desvantagens e pode ser escolhida com base nas necessidades do seu projeto.

Com a prática e a experiência, você pode escolher a melhor abordagem e melhorar a qualidade da experiência do usuário em seus projetos web.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!