Top 15 Ferramentas de Teste de Velocidade de 2018

A velocidade de um website pode ser um factor crítico para o seu sucesso. Como discutido em nosso guia de rede de entrega de conteúdo, sites de carregamento mais rápido podem se beneficiar de classificações SEO mais altas, taxas de conversão mais altas, taxas de bounce mais baixas, maior duração do visitante no site, melhor experiência geral do usuário, e engajamento. É por isso que é importante aproveitar as muitas ferramentas de teste de velocidade gratuitas disponíveis no site para que você possa alcançar um ótimo desempenho. O Google quer que seu site seja carregado em menos de um segundo.

O que um teste de velocidade de um site pode ajudá-lo a analisar?

Aqui estão apenas algumas das formas comuns de utilização das ferramentas de teste de velocidade dos sites:

• Pinpointing scripts, fonts, and plugins causing load time issues (HTML, JavaScript, CSS)
• Checking minification of your scripts
• Finding large images resulting in bottlenecks
• Determining if you have render-blocking JavaScript or CSS
• Testing Time to First Byte (TTFB)
• Analyzing total load times, page sizes, and # of requests
• Checking performance from different geographical locations
• Checking rendering speed in different browsers
• Analyzing HTTP Headers
• Measuring performance of your content delivery network
• Verifying that assets are loading correctly from your CDN

Website speed concepts

Before running a website speed test it is important to understand a few concepts behind how these tools work so that you can better analyze the data and then optimize your site accordingly. Não só pode testar a velocidade do seu host web, mas também pode medir a performance do seu CDN.

Time to first byte (TTFB)

Time to first byte (TTFB) é a medida da capacidade de resposta de um servidor web. Basicamente, é o tempo que o seu navegador leva para começar a receber informações depois de tê-las solicitado ao servidor. Usando um CDN você pode reduzir drasticamente o impacto da carga no seu servidor de origem, o que por sua vez deve ajudar a diminuir seu TTFB.

Ler mais sobre o tempo para o primeiro byte e o tempo para o último byte.

Render-blocking JavaScript e CSS

Render-blocking refere-se ao JavaScript e CSS que estão impedindo a sua página de carregar o mais rapidamente possível.

JavaScript

Google recomenda remover ou adiar o JavaScript que interfere no carregamento do conteúdo da dobra acima das suas páginas web. Here is a great tutorial on how to properly defer JavaScript loading.

Example of deferring JavaScript by placing it just before your </body> tag.

function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element);}if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);else window.onload = downloadJSAtOnload;

CSS

You will then also want to optimize your CSS delivery to keep it from causing delays on page load. Here are a few ways to fix this:

1. Properly call your CSS files
2. Lessen the amount of CSS files
3. Use less CSS overall

Here is a great article on render-blocking CSS by Ilya Grigorik, a web performance engineer at Google.

CSS is a render blocking resource, get it down to the client as soon and as quickly as possible to optimize the time to first render!

Minification of resources

Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as:

• Caracteres de espaço branco
• Caracteres de novas linhas
• Delimitadores de blocos

Isso acelera o tempo de carregamento, pois reduz a quantidade de código que deve ser solicitado ao servidor. Você pode usar uma ferramenta como o CSS do Dan e o JavaScript Minify para remover todos os caracteres desnecessários. Ou se você estiver rodando o WordPress você pode usar um plugin como o Autoptimize, que irá minificar todo o seu HTML, JavaScript e CSS para você.

HTTP requests

Quando o seu navegador pega dados de um servidor ele o faz usando HTTP (Hypertext Transfer Protocol). É uma requisição/resposta entre um cliente e um host. Em geral, quanto mais pedidos HTTP a sua página web for feita, mais lenta será a sua carga.

Existem muitas maneiras de reduzir o número de solicitações, como por exemplo:

• Combinando seus arquivos CSS e JavaScript
• Inline seu JavaScript (somente se for muito pequeno)
• Utilizando Sprites CSS
• Educando ativos como plugins de terceiros que fazem um grande número de solicitações externas

Lista de ferramentas de teste de velocidade do website

Agora que você tenha um entendimento básico dos conceitos de desempenho web acima, confira estas 15 ferramentas gratuitas abaixo para testar a velocidade do seu website. Cada uma delas oferece suas próprias características únicas, relatórios e formas diferentes de dissecar seus resultados.

É também importante perceber, ao executar ferramentas como estas, que uma primeira vez a pesquisa no DNS será normalmente mais lenta. Se você estiver comparando o tempo total de carga, às vezes é melhor executar testes várias vezes e obter uma média dos resultados.

KeyCDN Website Speed Test

KeyCDN construiu uma ferramenta rápida e leve para Teste de Velocidade de Website que você pode usar para obter informações detalhadas sobre o desempenho do seu website. Se oferece 14 locais para escolher de todo o mundo, e você tem a opção de tornar os resultados do seu teste privado ou público. O teste inclui uma quebra de cascata e uma pré-visualização visual do site na parte inferior. Você pode ver rapidamente quantos pedidos HTTP foram feitos, o tamanho completo da página solicitada e o tempo de carregamento.

É também uma das únicas ferramentas além do PageSpeed que é responsiva e funciona muito bem em dispositivos móveis.

Google PageSpeed Insights

Google PageSpeed Insights é uma ferramenta de teste de velocidade do seu site que classifica o seu site numa escala de 1 – 100. Quanto maior for o número, melhor será a optimização do seu site. Qualquer coisa acima de 85 indica que o seu site está a ter um bom desempenho. O PageSpeed dá-lhe relatórios tanto para a versão desktop como para a versão móvel do seu site. Você pode ver recomendações de melhorias, tais como a necessidade de minificar CSS ou otimizar suas imagens.

PageSpeed Insights mede como a página pode melhorar seu desempenho em:

• Time to above-the-fold load: Tempo decorrido desde o momento em que um usuário solicita uma nova página e até o momento em que o conteúdo acima da página é renderizado pelo navegador.
• Tempo até a carga completa da página: Tempo decorrido desde o momento em que um usuário solicita uma nova página até o momento em que a página é totalmente renderizada pelo navegador.

Um relatório móvel inclui uma categoria extra chamada “Experiência do usuário” que é incluída na pontuação do seu site. Isto inclui a verificação da configuração do seu viewport, tamanho dos seus alvos de tap (botões e links), e também tamanhos de fonte elegíveis.

A equipa PageSpeed Insights também lançou recentemente uma nova ferramenta de teste de velocidade do site em pensamento com o Google que poderá querer verificar. Um recurso legal são os belos relatórios que ele gera. Pode ser ótimo para enviar aos clientes.

Pingdom Speed Test

Pingdom é provavelmente uma das mais conhecidas ferramentas de teste de velocidade do site. Os seus relatórios estão divididos em quatro secções diferentes, que incluem uma divisão em cascata, grau de desempenho, análise de página e histórico.

A análise de página oferece uma grande visão geral com informação adicional como uma análise de tamanho, tamanho por domínio (pode facilmente comparar o tamanho dos seus activos CDN com o seu domínio), o número de pedidos por domínio, e que tipo de conteúdo tinha mais pedidos.

A ferramenta de teste de velocidade do Reino Unido também lhe permite testar a velocidade do seu site a partir de quatro locais principais incluindo:

• Dallas, Texas, EUA,
• Melbourne, Austrália
• San Jose, Califórnia, EUA
• Stockholm, Suécia

Os resultados de um teste de velocidade do Reino Unido proporcionam-lhe uma visão do desempenho, semelhante à do Google PagesSpeed Insights, que descreve onde pode fazer melhorias. Os resultados também decompõem o tamanho da página por tipo de conteúdo, tamanho da página por domínio, pedidos por tipo de conteúdo, e pedidos por domínio.

GTmetrix

GTmetrix entra em grandes detalhes ao verificar as métricas PageSpeed e YSlow, atribuindo ao seu site uma nota de F a A. Seus relatórios são divididos em cinco seções diferentes, incluindo PageSpeed, YSlow, quebra de cascata, vídeo e histórico.

Com um registro gratuito, você pode testar a partir de sete locais diferentes. Eles também permitem que você escolha o navegador, Chrome vs Firefox. Você pode testar e comparar o desempenho do site com vários tipos de conexão (como Cabo vs discagem) para ver como isso afeta o carregamento da sua página. Outros recursos avançados incluem uma reprodução de vídeo para analisar onde seu gargalo está ocorrendo e também a capacidade de executar o Adblock plus. Com os anúncios desativados, você pode ver como eles afetam o carregamento do seu site. É recomendável criar uma conta gratuita, pois você terá opções adicionais, como as mencionadas acima.

WebPageTest

WebPageTest é muito semelhante a algumas das ferramentas mencionadas anteriormente mas tem mais de 40 locais para escolher e mais de 25 navegadores (incluindo móveis). Ele atribui uma nota de F a A baseada em diferentes testes de desempenho como FTTB, compressão, caching, uso efetivo de um CDN, etc. Seu relatório é dividido em seis seções que incluem um resumo, detalhes, revisão de desempenho, detalhamento de conteúdo e capturas de tela.

Também oferece uma abordagem única no teste. Ele executa o que eles chamam de uma primeira visualização e uma visualização repetida. Isso ajuda a diagnosticar o que pode ser um atraso na primeira visualização do DNS, como mencionado anteriormente. O WebPageTest tem recursos mais avançados, como captura de vídeo, desativação do JavaScript, ignorar certificados SSL e spoofing de strings de agentes do usuário.

Varvy PageSpeed Optimization

Varvy PageSpeed Optimization é uma ferramenta desenvolvida e mantida por Patrick Sexton, que também criou o GetListed.org, que agora é conhecido como Moz Local.

Os relatórios são divididos em 5 seções diferentes, incluindo um diagrama de recursos, entrega de CSS, uso de JavaScript, problemas de velocidade de página encontrados, e serviços usados. Esta ferramenta usa mais de uma representação gráfica do que poderia ser corrigido no seu site, como o bloqueio de renderização.

Patrick faz um ótimo trabalho de também incluir documentação sobre como otimizar ainda mais o seu site com tutoriais sobre o caminho crítico de renderização, alavancando o cache do navegador, adiando o carregamento do JavaScript, e muito mais.

Uptrends

Uptrends é bastante básico, mas eles oferecem mais de 35 locais para escolher ao executar o seu teste de velocidade. O relatório deles é dividido em duas seções, uma divisão em cascata e grupos de domínios. Os grupos de domínio oferecem uma perspectiva única, pois categorizam os recursos em diferentes fontes: 1ª parte, estatísticas, CDN, social, anúncios, primeira parte em geral, e terceira parte em geral.

dotcom-monitor

dotcom-monitor oferece 23 locais diferentes e sete navegadores diferentes nos quais você pode executar o teste de velocidade do seu website. Sua característica única é que você pode rodar todos os testes geográficos simultaneamente. Isto pode poupar-lhe muito tempo, como qualquer outra ferramenta que você tenha para executá-los individualmente por localização. Você pode então clicar em cada relatório individual e ou quebra de cascata.

Os seus relatórios são divididos em cinco seções diferentes que incluem um resumo, desempenho, gráfico da cascata (quebra), host e erros.

PageScoring

PageScoring is all about offering a simple and easy to understand performance report with a minimalist design. They show your overall load time and then the following pieces of information:

• Domain lookups
• Connection Time
• Redirection Time
• Page Size
• Download Time

You can then see your assets and how long it took for each to load. If you are looking for a quick and easy website speed test tool, this works pretty good.

Yellow Lab Tools

Yellow Lab Tools is a newer web performance and frontend quality testing tool developed by Gaël Métais. This tool gives you a lot of information and some unique features not seen in other tools such as a view of when JavaScript interactions with the DOM during the loading of the page and other code validation issues. Get a global score based on the following qualifiers.

• Page weight
• Requests
• DOM
• Bad JavaScript
• Bad CSS
• Server Config

The JavaScript timeline shows you exactly how the DOM interacts during the loading of the page.

Google Chrome DevTools

And of course we can’t forget Google Chrome DevTools. It is a very easy to use tool (with advanced features) and you can quickly launch it at anytime in your Chrome broswer using the following shortcut keys.

• Windows: F12 or also Ctrl + Shift + I
• Mac: Cmd + Opt + I

Com a última atualização das ferramentas de desenvolvimento, eles adicionaram um painel de detalhes agregados na linha de tempo da cachoeira. Isto permite-lhe ver mais facilmente o que lhe está a custar mais tempo, e pode então decompor por domínios, subdomínios, etc. Para executar este clique no painel “Linha do Tempo” e pressione Ctrl + RCmd + R) para refrescar a página. Você pode então clicar no painel “Summary” e no painel de detalhes “Aggregated”.

Também temos um ótimo post sobre o que está bloqueando o DOM e como corrigi-lo. Nas ferramentas do desenvolvedor, você pode ver exatamente o tempo de carregamento do DOMContentLoaded e o tempo total de carga. Para executar este clique no painel “Network”, clique na opção “Show Overview” e prima Ctrl + RCmd + R) para refrescar a página. Uma linha azul aparecerá para DOMContentLoaded e uma linha vermelha para o tempo total de carga. Normalmente tudo o que resta ou toca na linha azul são activos que estão a bloquear o DOM, ou também referidos como recursos de bloqueio de renderização.

Sucuri Load Time Tester

O Testador de Tempo de Carga Sucuri fornece uma forma rápida e fácil de testar o desempenho dos seus sites de todo o mundo. Ele lhe dará um grau de desempenho global, de A a F. O teste mede quanto tempo leva para se conectar ao seu site e por uma página para carregar totalmente. Um valor muito importante a ter em atenção é o “tempo para o primeiro byte”, que lhe dá quanto tempo levou para o conteúdo ser enviado de volta para o browser para começar a processar a página.

Pagelocity

A ferramenta Pagelocity oferece outra abordagem única quando se trata de um teste de velocidade do site. Ela lhe dá uma pontuação total de 100, consistindo de fatores como social, SEO, recursos e código. A ferramenta também oferece a capacidade de rastrear seus concorrentes. Você pode se inscrever em uma conta gratuita para se beneficiar das características adicionais. A visualização do código é especialmente única, pois irá mostrar-lhe se o seu site está a correr sobre HTTPS, o que é o seu TTFB, e uma interface gráfica dos seus elementos DOM com um gráfico de barras.

A visualização dos recursos também é bastante interessante, pois pode ver rapidamente quais os recursos que compõem o peso total da sua página. Como você pode ver em nossas imagens de teste são mais do que 4x as dos nossos scripts externos.

YSlow

YSlow é um projeto de código aberto e uma ferramenta que analisa páginas web e ajuda você a descobrir porque elas são lentas com base nas regras do Yahoo! para sites de alta performance. Atualmente é mantido por Marcel Duran, que também está envolvido no projeto WebPageTest. YSlow opera em três passos para obter seus resultados de teste de desempenho:

1. YSlow rastreia o DOM para encontrar todos os componentes (imagem, scripts, etc.).
2. YSlow obtém informações sobre o tamanho de cada componente (Gzip, cabeçalhos de expiração, etc.).)
3. YSlow pega os dados e gera uma nota para cada regra, o que por sua vez lhe dá uma nota geral.

YSlow tem 23 regras diferentes contra as quais roda o seu website para classificá-lo, como usar um CDN e reduzir as pesquisas DNS. GTmetrix oferece uma ferramenta de análise online para verificar a sua pontuação YSlow. Verifique nosso tutorial detalhado sobre como melhorar sua pontuação YSlow.

PerfTool

PerfTool é um projeto de ferramenta de performance do lado do cliente de código aberto, hospedado no GitHub. Ele coleta várias informações sobre o seu site e as exibe de uma maneira fácil de digerir em uma página de relatórios. Ele combina três fontes de dados em uma, PageSpeed Insights, devperf, e W3CJS. No total, ele fornece mais de 200 indicadores de desempenho diferentes.

Uma grande vantagem com o PerfTool é que você pode executar vários testes de páginas ao mesmo tempo para o relatório do Google PageSpeed Insights. Em seguida, compare os resultados dos testes anteriores, defina o limiar de pontuação e obtenha um relatório detalhado sobre os seus testes. This can actually save you a lot of time if you are benchmarking your entire site’s web performance, as you don’t have to test your pages one by one.

Website speed test with Chrome extensions

There are quite a few free Chrome extensions in which you can analyze website speed. Here are a couple of them. You can easily launch them from right within your browser.

• Page Load Time
• app.telemetry Page Speed Monitor
• Performance-Analyser
• LoadFocus Load Testing

Mobile website speed test

If you are needing to run a mobile website speed test a couple of the tools we mentioned above do include this:

• WebPageTest
• GTmetrix
• dotcom-monitor

Another way to simulate a speed test on a mobile device is to use Chrome developer tools in device mode. Para entrar no modo de dispositivo clique no ícone do pequeno telefone no Chrome DevTools ou você pode pressionar Ctrl + Shift + MCmd + Shift + M). Você pode então escolher qual dispositivo você quer emular, a orientação e até mesmo a resolução. Você também pode alterar o estrangulamento da rede para ver como o seu site na verdade renderizaria, digamos uma conexão regular 2G ou 4G.

Você pode então usar a aba “Network” e quebra de cascata para executar testes de velocidade.

Summary

Como você pode ver, há uma série de ferramentas de teste de velocidade do site que você pode escolher. Cada uma delas tem suas próprias características únicas, como destacado acima. É uma boa ideia testar regularmente o seu site e estabelecer um benchmark para que ao longo do tempo você possa fazer melhorias.

Após você saber onde estão os gargalos, você pode começar a corrigi-los. Quase todas as ferramentas acima listam recomendações. Some of the most common fixes include:

• Compressing your images and files
• Picking a fast web host
• Optimizing your code and scripts
• Using a content delivery network
• Caching
• Reducing the number of HTTP requests