Como usar o WebPageTest

Uma das ferramentas mais importantes que usamos para teste de velocidade de carga é WebPageTest.org.

Existem várias outras opções para o teste de velocidade da página, mas esta é a que usamos. Vamos também citar outras nesta postagem. Mas nos concentraremos principalmente nesta ferramenta.

O que é Webpagetest?

O Webpagetest é uma fantástica ferramenta gratuita que pode ajudar você a identificar por que seu site está lento e ajustá-lo para ser o mais rápido possível.

A ferramenta oferece uma variedade de opções para ajudá-lo a entender onde você tem gargalos na sua velocidade e o que os visitantes estão experimentando em sua primeira visita, bem como nas visitas seguintes.

Você sempre deve estar preocupado com a velocidade de carga de seu site, pois pode ela afetar diretamente a experiência de usuário. Mas, como o Google agora usa velocidade como fator de classificação, isso se tornou ainda mais importante.

Mantendo as coisas simples

Como você pode imaginar, este é um tópico sobre o qual podemos falar por horas.

Aqui estamos apenas oferecendo uma visão geral de tudo o que pensamos que você deveria saber. Focaremos apenas nas áreas que achamos necessárias. Esta é uma postagem muito técnica. Mas prometemos fazer o nosso melhor para tornar as coisas tão fáceis de entender quanto possível.

Por que gostamos do Webpagetest?

O Webpagetest.org é o nosso site-teste para velocidade, devido à sua flexibilidade e configurações personalizadas que permitem resultados mais precisos.

Para esta postagem estamos trabalhando principalmente com as configurações padrão (com apenas alguns ajustes).

A outra coisa que o diferencia é que você pode fazer múltiplas amostras de velocidade do seu site. Por exemplo, se você fizer 3 testes, receberá um 1º, 2º e 3º resultados. Em seguida, o resumo de resultados fornecerá uma média desses 3 testes. Em um mundo perfeito, a sua 3ª execução deve ser mais rápida do que a terceira porque alguns dos seus conteúdos serão armazenados em cache naquele terceiro teste (se você achar que seu terceiro teste é mais lento do que o 1º, você pode ter outros problemas).

Testando a velocidade do seu site

Para executar um teste, visite webpagetest.org e insira os detalhes como o esboço abaixo:

  • Insira a URL do seu site: certifique-se de inserir sua URL exatamente como é a URL padrão. Se você usa https, então certifique-se de usá-lo para obter as informações mais precisas. Se você usa www, então certifique-se de usar isso também;
  • Localização do teste: escolha a área mais próxima da origem dos visitantes. Estamos em Salvador, BA. Então, normalmente usamos São Paulo. Dulles, VA, Estados Unidos é a opção padrão, mas às vezes há muitos testes em outras áreas e Dulles parece ser o mais rápido na maioria dos casos;
  • Selecione um navegador: diferentes locais de teste podem ter diferentes opções de navegador disponíveis. Normalmente usamos o Chrome como a escolha de nosso navegador, mas o IE também é uma opção comum. Dulles, VA tem opções para todos os navegadores, então escolha Dulles se desejar todas as opções disponíveis;
  • Configurações avançadas: isto é opcional, mas nós gostamos de executar 3 testes e, então, ver a primeira visualização e, depois, a segunda. Você pode também desmarcar o vídeo de captura para acelerar um pouco;
  • Conexão: isso emula o tipo de conexão à Internet que seu visitante pode ter. Você pode brincar com essa opção, mas normalmente mantenha a configuração para “cabo”, pois esse é o padrão;
  • Mantenha o teste privado: isso impede que o webpagetest.org mostre o resultado do seu site como um “site recentemente testado“. Geralmente mantemos isso marcado;
  • Clique em Iniciar teste

Você verá muitas outras abas e opções, mas não vamos abordar essas questões aqui, pois elas são muito técnicas. O que descrevemos acima é suficiente para uma visão geral do seu site.

Teste de velocidade de um site

Lendo os resultados do teste de velocidade

Uma vez que o teste tenha sido feito, você será levado para uma tela que apresenta uma variedade de resultados para você revisar.

Para esta postagem, estamos apenas nos concentrando na área superior, que mostra as notas (em formato de letras) e depois uma tabela com os resultados de desempenho.

Na imagem abaixo está o topo da página de resultados com as notas. Vamos nos aprofundar um pouco mais para entender o que isso significa.

Velocidade de um blog

Os A, B e C’s: a verdade é que nem sequer olhamos para essas letras. Mas se você é uma dessas pessoas que precisa ter todos os A’s, então você pode ter um momento de euforia e depois trabalhar as páginas de seu site para melhorá-las. Seu objetivo é tornar o seu site rápido; não obter uma letra verde muito bonita.

Aqui está o que cada um desses itens significa:

Primeiro tempo de byte: o tempo que leva para o servidor responder a um usuário navegando na página, isso é mais comumente o tempo de backend necessário para renderizar a página. Frequentemente o servidor de hospedagem desempenha grande parte disso, sendo muito lento.

Keep Alive Enabled: em termos simples, é uma comunicação que acontece entre o servidor web e o navegador que diz “olá, você pode pegar mais de um arquivo por vez”. Isso permite que vários arquivos sejam recuperados de uma vez, caso contrário um arquivo seria baixado a cada momento, que o tornaria ainda mais longo.

Compress Transfer: basicamente, isso é um sinal de como são grandes/pequenos os tamanhos do seu arquivo. Se você tiver compactação GZIP, o site deve estar bem.

Compress Images: as imagens são um dos maiores problemas na maioria dos sites e, ao compactá-las, você está reduzindo o tamanho do site e removendo os metadados da imagem, o que pode melhorar a velocidade.

Conteúdo estático de cache (Cache Static Content): o conteúdo do seu site que não muda frequentemente (como as imagens, arquivos javascript etc). Podem ser configurados para que o navegador que o usuário esteja usando possa armazená-los. Então, quando eles retornarem ao seu site, eles podem usar a cópia armazenada em seu cache em vez de aguardar o site carregá-lo. Isso é extremamente útil nas visitas de retorno.

Uso efetivo do CDN: se o seu site estiver usando um CDN (Content Distribution Network), isso será representado aqui.

Entendendo a tabela de resultados de desempenho

Resultados de desempenho (Media Run): Esta tabela fornece os tempos de carga média dos 3 testes e retorna as médias para a primeira visualização e a visualização de repetição.

A primeira visualização (First View) está emulando um teste de uma pessoa que visita seu site com um navegador que possui cache e cookies apagados. É, basicamente, uma pessoa que visita seu site pela primeira vez.

A visualização repetição (Repeat View) é feita logo após a primeira visualização e representa o que alguém veria e quão rápido o conteúdo carregaria para alguém que chegou ao seu site, saiu e voltou. A visualização de repetição deve ser mais rápida que a primeira.

Velocidade de carregamento

Compreendendo as métricas de desempenho de velocidade acima

Tempo de carregamento ou tempo completo do documento (Load Time or Document Complete Time): o ponto em que conteúdo suficiente é carregado para ter algum tipo de interação com a página. A maioria das imagens e o código são carregados e os usuários podem rolar e interagir com a página.

Primeiro byte (First byte): este é o tempo que o servidor leva para exibir a página. Isso não tem nada a ver com os arquivos em seu site (é estritamente um resultado relacionado ao servidor). O valor deve estar entre 200 a 400

Como um guia geral, você deve ter um tempo de carregamento do site não superior a 2 segundos e um primeiro tempo de bytes de menos de 500 ms (embora o Google recomenda 200 ms).

Solicitação (Request): este é o número de imagens, arquivos JS e CSS e outros elementos que o servidor precisa solicitar para exibir o site. Embora não haja um número certo ou errado, geralmente quanto menor, melhor.

Renderização inicial (Start Render): quanto tempo demora para que o navegador comece a puxar e exibir o conteúdo da página ou o ponto em que uma página branca não é mais exibida.

Totalmente carregado (Fully Loaded): o tempo de carregamento completo da página. Isso inclui todos os códigos de rastreamento, anúncios etc.

Índice de velocidade (Speed Index): informa o quão rápido o seu site é. Uma pontuação menor é melhor (esta não é uma métrica em que nos concentramos demais, mas é bom ter como um objetivo algo inferior a 1000).

Comente