Webpagetest: Domine o monstro dos testes e analise o desempenho do seu site

Jan Hornung Última atualização 03.12.2020
14 min.
Webpagetest,
Última atualização 03.12.2020

Webpagetest.org é provavelmente a melhor e mais abrangente ferramenta gratuita para medir o tempo de carregamento da sua página. Infelizmente, ele fornece muitos dados muito complexos. Hoje vou lhe mostrar o que você precisa definir, como você pode trazer ordem na confusão de dados e quais parâmetros você precisa para uma análise profissional. Porque só se você souber como seus clientes projetam e carregam suas próprias páginas, você pode otimizá-las no topo.

O seu próprio site deve estar seguro. E rápido. Claro, porque muito depende do tempo de carregamento: a taxa de conversão, a sensação de segurança dos seus visitantes e o ranking do Google da sua oferta. No entanto, muitos usuários do WordPress não chegam ao ponto de poder determinar corretamente o tempo de carregamento da sua própria página.

Por exemplo, alguns operadores de sites nem sequer sabem que ferramentas podem utilizar para analisar o seu site correctamente. Ou eles não sabem que configurações têm de fazer para alcançar resultados realmente bons. Para que você não cometa os mesmos erros, vou mostrar-lhe hoje como você pode obter uma visão rápida e significativa do seu site com a (na nossa opinião) melhor ferramenta de medição gratuita de sempre. Então você sabe exatamente quão rápido a sua página carrega e se e onde você precisa otimizar.

A fim de entender exatamente como funcionam as etapas individuais de análise, aconselho que você olhe os conjuntos de dados ligados nos pontos importantes ou que analise sua própria página em paralelo. Porque: trazer a ordem para a confusão de dados não é assim tão fácil. Mas como recompensa pelo esforço, você receberá alguns dos melhores dados que você já coletou sobre o seu site. E especialmente se você trabalha para clientes ou ganha dinheiro com seus projetos WP-WordPress -, o esforço vale a pena.

O Webpagetest é a melhor ferramenta que conhecemos

É verdade: Nós elogiamos o webpagetest. org efusivamente neste artigo. Talvez demasiado efusivamente, mas não sem razão. Porque a Webpagetest é a única ferramenta que conhecemos que lhe permite determinar de forma fiável o tempo de carga absoluto e percebido do seu site. E isso é completamente grátis. Sem barreira de pagamento, sem modelo de assinatura, apenas dados valiosos e uma API que lhe permite automatizar tudo: é assim que deve ser.

Por uma questão de completude, deve ser dito que você também obtém bons resultados de medição com o Pingdom e a GTmetrix. Mas não tão bem como com a Webpagetest. Claro que isto não significa que você não pode e não deve validar seus resultados com vários testes em diferentes ferramentas. E também não significa que não devas medir com o Pingdom ou GTmetrix. Somente eu posso recomendar que você dê uma olhada na Webpagetest pelo menos uma vez.

Quase se tornou um mantra connosco: Para medir o tempo de carregamento da sua página, ferramentas como o Google PageSpeed Insights não são suficientes. Porque estes apenas determinam o potencial de desempenho da sua página. Claro que estes dados ainda são valiosos - de uma perspectiva de desempenho e SEO - mas simplesmente não permitem tirar conclusões sobre o que realmente acontece quando um visitante chama a sua página.

Mas é exactamente isso que queres saber. E isso é exatamente o que você precisa saber para determinar se uma medida de otimização é eficaz.

Infelizmente, a Webpagetest não só fornece dados não muito bonitos, mas também resultados de testes muito extensos. Portanto, vou mostrar-vos hoje como utilizar o Webpagetest e como interpretar os resultados.

Na próxima secção, vou entrar brevemente em alguns antecedentes sobre a ferramenta. Se não estás interessado, salta esta parte.

Webpagetest: O irmão mais velho do Google PageSpeed Insights

Webpagetest era originalmente um projeto da AOL e destinado apenas para uso interno. No entanto, em 2008, o programa tornou-se então software de código aberto e é agora principalmente mantido e desenvolvido pela Google. Toda a documentação da Webpagetest pode ser encontrada no GitHub e também pode ser baixada e utilizada localmente.

Enquanto PageSpeed Insights mostra onde está o potencial de optimização do seu site, a Webpagetest pode fazer muito mais. Mostra-lhe não só como pode melhorar o seu site, mas também directamente que efeitos as suas medidas de optimização têm sobre o tempo de carga do seu site.

Ao contrário do Pingdom e da GTmetrix, não há nenhuma empresa por trás da Webpagetest que queira vender um serviço pago (ok, exceto o Google, mas pelo menos o serviço não é vendido diretamente). Em vez disso, pode-se dizer que a Webpagetest faz parte do plano do Google para tornar a web mais rápida em geral. No entanto, você quer avaliar os esforços do Google neste contexto.

4 passos para dados de tempo de carga realmente significativos

Sim, a Webpagetest é mais complexa do que outras ferramentas. Mas não deixes que isso te assuste! Neste caso, a complexidade é boa. Porque isso significa que você obtém ótimos dados sobre o seu site. E mesmo como primeiro usuário, você pode obter as informações relevantes muito rapidamente.

E isso é com os quatro passos seguintes:

Passo 1: Definir parâmetros de teste

Passo 2: Obtenha uma visão geral

Terceiro passo: Análise detalhada

Quarto passo: Análise do tempo de carga percebido

Passo 1: Definir parâmetros de teste

A Webpagetest oferece configurações muito boas para testar o seu site. Quatro dessas configurações são particularmente importantes para obter bons resultados de medição:

  • o servidor a ser testado com (1)
  • o navegador a ser utilizado para os testes (2)
  • as configurações avançadas do teste, que discutirei mais detalhadamente dentro de momentos (3)
Página inicial da Webpagetest
Este é o aspecto da página inicial da Webpagetest. É um pouco mais complexo do que o do Pingdom ou da GTmetrix.

O servidor que escolhes para o teste simula um utilizador que acessa a página a partir daí. Se escolheres o servidor padrão nos EUA, será exibido o resultado do teste para uma solicitação de página no Texas. Na maioria dos casos, no entanto, isto não é necessariamente o que desejas. Por isso, esta configuração é muito importante, porque pode distorcer maciçamente o resultado geral e, dependendo da aplicação, deve ser definido em conformidade.

Os dois casos de uso mais comuns são:

  1. Determinação do tempo de carregamento para um usuário do seu grupo alvo
  2. Comparação do tempo de carga após uma medida de otimização

Se você quiser saber como seus visitantes percebem o tempo de carregamento da página, então a localização do servidor deve corresponder o mais próximo possível da localização de um usuário típico. Para um blog com leitores principalmente alemães, isso significa que você deve escolher um servidor na Alemanha, por exemplo, em Frankfurt.

Se você quer saber o que uma medida de otimização tomou, então não importa, em princípio, qual a localização do servidor que você usa. A única coisa importante é: Você deve usar a mesma localização de servidor para o teste antes e depois da otimização. Caso contrário, não é possível comparar os dados de medição corretamente. Claro, eu recomendo um servidor de testes alemão aqui também. Isto simplesmente proporciona os resultados mais realistas.

Webpagetest: Mapa para a selecção do servidor de testes no Webpagetest.org
Além de uma seleção de lista, você também tem a opção de selecionar o servidor de teste através de um mapa. Você também pode ver uma visão geral de todos os servidores de teste aqui.

O navegador utilizado

A Webpagetest oferece muitas opções de configuração para simular certas técnicas de transmissão e navegadores. Por exemplo, você pode definir que a página deve ser carregada através de uma conexão 3G e Firefox. No entanto, para começar, basta escolher o browser que o seu grupo alvo utiliza com mais frequência.

Você pode ver informações sobre isso no Google Analytics ou Piwik, por exemplo. Por exemplo, RAIDBOXES é visitado principalmente através do Cromo.

Excerto dos navegadores utilizados pelos visitantes do raidboxes.de. Estes servem como modelo para as configurações no Webpagetest.
Os navegadores mais usados no raidboxes.de. Portanto, para uma análise no Webpagetest, eu testaria principalmente o Chrome. Os resultados para Firefox e Safari também são, naturalmente, interessantes.

Muito importante: As configurações avançadas determinam o quão bons serão os seus dados de medição!

Além dos dois parâmetros que determinam como o teste é realizado - ou seja, a localização do servidor e o navegador utilizado - a Webpagetest também oferece a opção de definir o que o teste deve sair no final. Nas configurações avançadas você pode, por exemplo, definir que apenas determinados valores devem ser emitidos, ou que a medição deve parar automaticamente após um determinado tempo. E aqui estão duas configurações que são especialmente importantes para obter dados razoavelmente abrangentes e confiáveis: O "Número de testes a executar" e a "Vista de repetição".

Em princípio, você deve sempre medir mais de uma vez ao medir o tempo de carga. Caso contrário, corre-se o risco de medir outliers e possivelmente procurar um problema que não existe. E acredite em mim: nós já experimentamos isso algumas vezes. Eu recomendo pelo menos três testes consecutivos.

Você também deve se lembrar de sempre medir a versão em cache da sua página. Você pode fazer isso usando a opção Repetir Visão.

Configurações avançadas da Webpagetest
As configurações avançadas da Webpagetest são onde está a verdadeira magia da ferramenta. Somente se você selecionar pelo menos 3 testes aqui e também incluir a Repeat View, os dados que você obtiver serão realmente interessantes.

Depois de ter introduzido a sua URL - por exemplo https://raidboxes.de - e definido os parâmetros de teste (ou seja, o servidor alemão, o browser, o mínimo de 3 repetições e a vista de repetição), pode iniciar o teste. Dependendo de quantos outros usuários estejam testando suas páginas, a análise pode demorar alguns minutos.

É importante notar que a Webpagetest apenas testa a página que está acessível sob a URL, não toda a sua presença na web. Isso significa que você deve testar a sua página inicial, todas as páginas de destino e, se relevante, a visão geral do seu produto individualmente.

Neste guia eu trabalho com os dados da análise da nossa página inicial, raidboxes.de. Isso significa que você pode reproduzir tudo explicado aqui um a um no webpagetest.org. Basta clicar aqui e você terá os resultados da análise.

Passo 2: Obtenha uma visão geral

A primeira coisa que você vai ver é a visão geral do tempo de carregamento da página. Isto está dividido em três secções:

  • os parâmetros de teste e os resultados das análises potenciais (1)
  • a repartição das principais características (2 )
  • a visão geral da estrutura da página (3)
Os resultados gerais do teste da página web
Visão geral dos primeiros resultados do webpagetest.org

(1) Quanto mais verde, melhor.

Na primeira área, os parâmetros de teste são listados novamente para verificação. Se você descobrir um erro aqui, basta repetir o teste. Você também verá os resultados da análise de potencial. A Webpagetest também exibe os resultados do Google PageSpeed Insights . Se está satisfeito com a exibição espartana da Webpagetest, pode passar sem PageSpeed Insights .

A Webpagetest usa uma série escolar e um código de cores. A é a melhor, F a pior pontuação. Verde indica um bom grau de otimização, laranja indica potencial de otimização utilizável, e vermelho indica necessidade urgente de ação.

(2) Quanto mais rápido, melhor.

Na segunda seção dos resultados, você será apresentado com todos os dados-chave relevantes do tempo de carregamento da sua página para as variantes em cache e sem cache da sua página. É importante notar: Na síntese, a Webpagetest exibe apenas os valores para um dos três testes. A visão geral mostra qual teste está diretamente ao lado das etiquetas First View e Repeat View. Run 2, por exemplo, é o resultado da segunda execução de teste.

Explicação dos resultados individuais da Webpagetest
Infelizmente, esta síntese só está disponível para resultados de medições individuais, ou seja, execuções de testes individuais. Para os valores realmente valiosos, você tem que ir um nível mais fundo. Explicarei como fazer isto dentro de momentos.

Cinco valores são particularmente importantes aqui agora:

  • Tempo de Carga: O tempo que sua página precisa até que o usuário tenha a impressão de que a página está completamente carregada. O tempo de carga, portanto, corresponde ao tempo de carga total percebido da sua página.
  • Primeiro byte: Tempo até que o primeiro byte de dados seja transmitido entre cliente e servidor web. Este valor deve, se possível, ser inferior a 200 milissegundos e é uma indicação importante do desempenho do seu alojamento.
  • Iniciar Renderização: Este valor descreve o tempo que uma página leva para carregar até que o visitante seja mostrado o conteúdo pela primeira vez. Até este momento, a página permanece completamente branca para o usuário. É claro que este valor também deve ser o mais baixo possível. Juntamente com o Tempo de Carga (ou Documento Completo), este valor forma a referência de avaliação para a velocidade percebida do site. Start Render marca o início do carregamento visível da sua página, Documentar Completar o fim.
  • Documento Completo: Este valor é idêntico ao Tempo de Carga.
  • Fully Loaded: Este valor mostra quando a página está completamente carregada com todos os scripts e elementos. Descreve o tempo total de carga técnica da página. Isto é irrelevante para o visitante. O que é realmente decisivo é a percepção do tempo de carregamento.

A todos estes valores aplica-se o seguinte: quanto menor, melhor. Como orientação, você pode se lembrar:

  • o tempo para o primeiro byte deve ser inferior a 200 milissegundos
  • O tempo de início de renderização não deve ser superior a 2,5 segundos
  • Documento completo não deve ser superior a cinco segundos

Claro, estes valores são apenas regras de ouro. Depende sempre da sua página: Uma página de loja com 50 produtos - ou seja, 50 ou mais imagens e textos descritivos - carrega naturalmente mais lentamente do que uma página de impressão que consiste apenas de texto.

Portanto, só posso aconselhar: Teste os locais dos seus concorrentes directos e os seus modelos a seguir. Desta forma, você obtém valores comparativos dentro da indústria.

Cálculo dos valores médios - Agora é a hora do nitty-gritty

Infelizmente, a visão geral explicada acima mostra apenas os resultados de uma única medição. E você se lembra: Valores isolados e isolados podem te desviar. É por isso que você fez pelo menos três medições consecutivas para o teste da sua página. E as médias destas três medidas são as melhores aproximações que você pode obter para o tempo de carregamento da sua página.

E não se preocupe: criar as médias só requer o apertar de um botão:

Resultados do teste da página web da plotagem
Ao clicar na opção de gráfico, a Webpagetest calcula os valores médios para os seus resultados de medição.

Agora você obtém uma quantidade inicialmente confusa de dados das chamadas parcelas. E estes são exatamente os resultados que você quer ter. Em princípio, esta nova síntese é a mesma para todos os valores. Por isso, quando se entende como lê-los, são tudo menos confusos.

Teste da página Web Vista do Plot
Estas parcelas são uma excelente ilustração do motivo pelo qual você deve sempre fazer múltiplas medições: O ponto de medição 3 é quase um segundo pior do que o ponto de medição 1, por isso a média é essencial para uma análise de desempenho profissional.

Como você pode ver, todos os três valores medidos (1-3) são plotados aqui em um diagrama (notável é especialmente a diferença entre o ponto de medição 1 e o ponto de medição 3). Acima do gráfico está o valor a que o diagrama se refere (4). Neste caso, o tempo de carga percebido(documento completo ou tempo de carga). O número na coluna Média descreve agora o valor médio do tempo de carga em todas as três medições (5). Esta média é a informação mais valiosa que você pode obter sobre o seu site.

A propósito: Ao assinalar a caixa Repetir você também pode obter os valores para o tempo de carregamento com e sem cache. E se você quiser encontrar os resultados para os outros valores: Basta procurar por "First Byte" e "Start Render" através da pesquisa do seu navegador (CTRL+F para PCs e cmd+f para Macs).

Conclusão provisória: Muito trabalho para dados particularmente valiosos

Certo, isso foi muita informação. E foram muitos passos. Especialmente em comparação com métodos de teste simples. Mas vale a pena o esforço, porque você o viu nos números nos gráficos: Dois testes com as mesmas configurações podem por vezes estar um segundo inteiro separados. Em determinadas circunstâncias, o acaso decide se você investe tempo e dinheiro na otimização de suas páginas ou não. E especialmente se você ganha seu dinheiro com WordPress , seja com sua própria loja, uma empresa de web design ou sua própria agência, você deve ter a melhor base de dados para tal decisão.

Na verdade, ainda não chegámos ao fim. Porque agora você conhece os parâmetros de desempenho mais importantes da sua página, então você sabe o quão rápido a sua página carrega e se ainda há potencial para otimização, mas você não sabe exatamente onde a sua página pode ser melhorada. E é exactamente para isso que serve a análise detalhada.

Passo 3: Análise detalhada

A visão geral já lhe diz muito sobre a sua página. Você pode ver se ainda há espaço para melhorias em certas áreas, quão rápido a sua página realmente carrega e se ela poderia carregar um pouco mais rápido. No entanto, você ainda não será capaz de identificar as causas dos problemas. Mas você pode encontrá-los nos relatórios detalhados:

Os diagramas de cascata listam cada pedido HTTP que um navegador faz ao servidor web. À primeira vista, estes diagramas parecem muito complexos e confusos. Mas se você souber como, você pode extrair muitos detalhes sobre o seu site de um gráfico de cachoeira com apenas um olhar. Aqui mostramos-lhe como ler correctamente os gráficos das cascatas e como pode utilizá-los para optimizar ainda mais o seu site.

Basicamente, uma página rápida tem um pequeno diagrama de cachoeira com poucos e curtos pedidos. Isto significa que o comprimento do diagrama e o comprimento das barras nas linhas individuais são particularmente relevantes.

Na Análise de Desempenho você encontrará informações detalhadas sobre como o desempenho do seu site já está otimizado. Esta revisão detalhada contém três elementos:

  • a checklist de otimização
  • a repartição detalhada do teste de desempenho
  • o glossário

Você deve dar uma olhada no glossário primeiro se você analisar o seu site com webpagetest.org pela primeira vez. Todos os termos importantes da Análise de Desempenho são explicados aqui.

Excerto do glossário da Webpagetest.
Infelizmente em inglês, mas a Webpagetest na verdade explica cada termo técnico em detalhes.

Na Lista de verificação de otimização você encontrará os critérios de avaliação individual que são aplicados a cada uma das solicitações HTTP. Uma marca de verificação verde significa que o requisito é cumprido, um triângulo amarelo indica uma necessidade de melhoria e uma cruz vermelha significa que a medida de otimização proposta está faltando.

Um excerto da lista de verificação de desempenho da Webpagetest.
Com a Optimization Checklist você pode ver exatamente quais imagens do seu site ainda têm potencial de otimização, quais solicitações devem ser mais compactadas e se o seu cache está funcionando corretamente.

Finalmente, você encontrará uma descrição dos avisos e das medidas de otimização em falta na seção de detalhes. A Webpagetest descreve as otimizações ainda possíveis para cada recurso. Para imagens, por exemplo, mostra o volume de dados que pode ser salvo.

Você terá que passar algum tempo com essas avaliações detalhadas, mas com a ajuda delas você poderá obter uma imagem detalhada do seu site e do seu potencial de otimização.

E como é basicamente a mesma informação que o PageSpeed Insights cospe, é claro que você pode apenas executar uma análise PageSpeed em paralelo. Porque este teste é muito mais bonito e mais bem preparado.

Passo 4: Análise do tempo de carga percebido

Ao contrário de todos os outros testes que conhecemos, o Webpagetest é o único que exibe gratuitamente o tempo de carga percebido da sua página. Através da visualização da película pode ver um vídeo do carregamento da página. Desta forma, você pode ver exatamente o que seus visitantes vêem e pode avaliar melhor se e como o seu site deve ser otimizado.

Webpagetest Encontrar Filmstripview
Encontrará a visualização da película na vista geral dos seus resultados de medição, na extrema direita. Atenção: Esta opção nem sempre é exibida. Porque é que não está bem claro para mim. No entanto, repetir o teste sempre tornou a opção acessível até agora.

O tempo de carga percebido é provavelmente a métrica mais importante do tempo de carga da sua página. Ele influencia se os seus visitantes saem da página prematuramente, a probabilidade de conversão e a experiência geral da sua página. Especialmente para as lojas, a velocidade de página percebida é, portanto, uma referência importante. É claro que o tempo de carregamento percebido deve ser sempre o mais baixo possível.

Além da exibição do filme, lembre-se disto:

Representação esquemática do tempo de carregamento da página
O tempo de carga total percebido deve ser o mais baixo possível. Ao mesmo tempo, é importante que a distância entre T0 e start render seja a mais curta possível. Porque então o usuário tem a impressão muito cedo de que a página está completamente carregada, mesmo que esteja longe de ser assim.

O Filstrip View mostra-lhe exactamente como é a sua página e quais os processos que estão a decorrer em qualquer altura. Se você olhar para o teste com estes dados, você verá que nada acontece na página por mais de três segundos. Mas depois, de uma só vez, a página parece quase exatamente a mesma que no estado final. Assim, o usuário tem a impressão de que a página terminou de carregar dentro de 3,5 segundos. Ou o visitante já tem a sensação, após 3,5 segundos, de que pode interagir com a página.

Portanto, especialmente ao priorizar o conteúdo visível da página, a Filmstrip View é uma ferramenta muito valiosa.

Conclusão: Com estas noções básicas e um pouco de prática você terá uma visão muito boa do seu site.

Ok, depois de ler este artigo você deve agora ser capaz de escolher as configurações certas para um teste de página web, saber que métricas interpretar e como evitar interpretações erradas devido a aberrações. Você também sabe onde encontrar informações detalhadas sobre a sua página e como determinar e exibir o tempo de carga percebido da sua página.

Então você sabe o básico importante para ter uma visão realmente abrangente do seu próprio site, dos sites dos seus clientes e de qualquer outro projeto web. E você sabe onde obter as informações que lhe permitem preencher os resultados das medições com vida e tirar conclusões significativas para o seu site.

Mas porque é que isto era importante outra vez? Muito simplesmente: Sem uma medição razoável do estado real da sua página, você não pode avaliar corretamente como a sua página carrega atualmente. E por outro lado, falta-lhe informação para a optimização do tempo de carregamento.

Você tem outra dica para usar o webpagetest? Perfeito, então escreva um comentário sobre este post!

Membro da equipa RAIDBOXES desde o primeiro momento e chefe de suporte. Ele prefere falar sobre o PageSpeed ​​ e desempenho do site em BarCamps e em WordCamps. A melhor maneira de o subornar é com um café expresso - ou um pretzel da Baviera.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.