Webpagetest: Domine o monstro do teste e analise as suas páginas web

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

WebPagetest é provavelmente a melhor e mais abrangente ferramenta gratuita para medir o tempo de carregamento da sua página. Infelizmente fornece uma série de dados muito complexos. Hoje vou mostrar-lhe o que tem de ajustar, como colocar ordem no caos de dados e quais os parâmetros necessários para uma análise profissional. Porque só se você souber como os seus clientes projetam e as suas próprias páginas são carregadas, você pode otimizá-las.

Certamente o próprio lado deveria estar. E rápido. Claro, porque muito depende do tempo de carregamento: a taxa de conversão, a percepção de segurança dos seus visitantes e o ranking do Google da sua oferta. Mas muitos WordPress usuários nem chegam ao ponto em que podem determinar corretamente o tempo de carregamento da sua própria página.

Alguns operadores de sites, por exemplo, nem sequer sabem com que ferramentas podem analisar corretamente o seu site. Ou eles não sabem que configurações têm de fazer para alcançar resultados realmente bons. Para evitar cometer os mesmos erros, vou mostrar-lhe hoje como obter uma visão rápida e significativa do seu site com a (na nossa opinião) melhor ferramenta de medição gratuita disponível. Então você sabe exatamente quão rápido o seu site carrega e se e onde você tem que otimizar.

A fim de entender exatamente como funcionam as etapas individuais de análise, aconselho que você olhe para os conjuntos de dados vinculados nos pontos importantes ou que analise seu próprio site em paralelo. Porque: trazer ordem para o caos 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 um cliente ou ganha dinheiro com seus projetos WPWordPress , o esforço vale a pena.

O Webpagetest é a melhor ferramenta que conhecemos

Concedido: Nós elogiamos webpagetest.org neste artigo emocionado. Talvez demais, mas não demais. Porque a Webpagetest é a única ferramenta conhecida por nós que lhe permite determinar de forma fiável o tempo de carregamento absoluto e percebido da sua página. E tudo isto de graça. Sem barreira de pagamento, sem modelo de assinatura, simplesmente dados valiosos e um APIque lhe permite automatizar tudo: é assim que deve ser.

Por uma questão de completude, deixe-me dizer que você também Pingdom e GTmetrix obter bons resultados nos testes. Mas não tão bem como com um teste de página web. Isto não significa, claro, que você não pode e não deve apoiar os seus resultados com vários testes em diferentes ferramentas. E isso não significa que não devas medir com o Pingdom ou a GTmetrix. Mas eu posso recomendar-lhe que 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 Google PageSpeed Insights não fora. Porque estes apenas determinam o potencial de desempenho do seu site. Estes dados ainda são valiosos - do ponto de vista de desempenho e SEO - mas simplesmente não permitem tirar conclusões sobre o que realmente acontece quando um visitante liga para o seu site.

É isso que você quer 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 bem preparados, mas também resultados de testes muito extensos. Portanto, hoje vou mostrar-vos como utilizar a Webpagetest e como interpretar os resultados de uma forma básica.

Na próxima secção irei abordar brevemente algumas informações de fundo sobre a ferramenta. Se não estás interessado, pular Faz a parte.

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

Webpagetest era originalmente um projeto da AOL e destinado apenas para uso interno. Mas em 2008 o programa tornou-se software de código aberto e agora é mantido e desenvolvido principalmente pelo Google. A documentação completa da Webpagetest pode ser encontrada em GitHub e também pode baixado e usado localmente.

Enquanto PageSpeed Insightsisso mostra onde está o potencial de otimização do seu site, a Webpagetest pode fazer muito mais. Porque 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 no tempo de carregamento 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. O que quer que se queira avaliar os esforços do Google neste contexto.

Em 4 passos para dados de tempo de carga realmente significativos

Sim, a Webpagetest é mais complexa do que outras ferramentas. Mas não deixes que isto te atrase! 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ê obtém as informações relevantes muito rapidamente.

Isto é feito com os quatro passos seguintes:

Primeiro passo: Definir parâmetros de teste

Segundo passo: fornecer 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 especialmente importantes para obter bons resultados nos testes:

  • o servidor a ser testado com (1)
  • o navegador a ser testado com (2)
  • as configurações de teste avançadas, que entrarei em mais detalhes em um momento (3)
Página inicial da Webpagetest
Este é o aspecto da página inicial da Webpagetest. É um pouco mais complexo do que os do Pingdom ou 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.

As duas aplicações 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, 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 precisa, então, em princípio, não importa a localização do servidor que você usa. A única coisa importante é: Você tem que 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 medidos corretamente. Claro que recomendo um servidor de testes alemão também para este teste. Simplesmente proporciona os resultados mais realistas.

Webpagetest: Mapa para seleccionar o servidor de testes no Webpagetest.org
Além de uma seleção de lista, você também tem a possibilidade de selecionar o servidor de teste através de um mapa. Você também pode ver todos os servidores de teste em um relance.

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. Para começar, é suficiente escolher o browser que o seu grupo alvo utiliza com mais frequência.

Você pode encontrar informações sobre isso no Google Analytics ou Piwik, por exemplo.RAIDBOXES

Extracto dos browsers utilizados pelos visitantes do raidboxes.de. Estes servem de 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, por outro lado, também são, naturalmente, interessantes.

Muito importante: As configurações avançadas determinam o quão bons serão, no final, 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 o teste deve parar automaticamente após um certo 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 carregamento. Caso contrário, você corre o risco de medir aberrações e pode estar à procura de um problema que não existe. E acredite em mim: nós já experimentamos isso várias vezes. Eu recomendo pelo menos três testes consecutivos.

Você também deve se lembrar de sempre medir a versão em cache do seu site. Você pode fazer isso com a opção Repetir Visão.

Configurações avançadas da Webpagetest
Nas configurações avançadas da Webpagetest 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.

Você tem o seu URL - por exemplo https://raidboxes.de - e definir os parâmetros de teste (ou seja, o servidor alemão, o navegador, o mínimo de 3 repetições e a Vista de repetição), você pode iniciar o teste. Dependendo de quantos outros usuários estão atualmente testando suas páginas, a análise pode demorar alguns minutos.

Importante: A Webpagetest testa apenas a página que pode ser alcançada 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, também a sua visão geral do produto individualmente.

Neste guia eu trabalho com os dados da análise da nossa homepage, raidboxes.com. Isso significa que você pode recriar tudo o que é explicado aqui no webpagetest.org. Basta clicar aqui e você receberá os resultados da análise a partir do final de dezembro de 2016.

Passo 2: Obter uma visão geral

A primeira coisa que você vê é a síntese 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 decomposição das principais características (2)
  • a visão geral da estrutura da página (3)
Os resultados gerais da Webpagetest
Visão geral dos primeiros resultados da webpagetest.org

(1) Quanto mais verde, melhor.

Na primeira seção, os parâmetros de teste são listados novamente para fins de verificação. Se você encontrar um erro aqui, basta repetir o teste. Você também verá o resultado da análise de potencial. A Webpagetest também lhe dá os resultados do Google PageSpeed Insights desligado. Se você conseguir lidar com a apresentação espartana da Webpagetest, a dualso pode ser definida para PageSpeed Insights ...para passar despercebido.

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

(2) Quanto mais cedo, 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 não em cache da sua página. O importante aqui é que..: Na síntese, a Webpagetest exibe apenas os valores para um dos três testes. A visão geral mostra qual é o teste, mesmo 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:

  • Tempo de carregamento: O tempo que sua página leva para que o usuário sinta que a página está totalmente carregada. O tempo de carga 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. Se possível, este valor deve ser inferior a 200 milissegundos e é um indicador importante para o desempenho do seu alojamento.
  • Iniciar Renderização: Este valor descreve o tempo que uma página carrega até que o conteúdo seja exibido ao visitante pela primeira vez. Até este momento, a página permanece completamente branca para o usuário. Este valor também deve ser o mais baixo possível. Juntamente com o Tempo de Carga (ou Documento Completo), este valor forma o padrão 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 indica quando a página está totalmente carregada, com todos os scripts e elementos. Descreve o tempo total de carga técnica da página. Isso geralmente é irrelevante para o visitante. O que realmente conta é o tempo de carregamento percebido.

A todos estes valores aplica-se o seguinte: Quanto menor, melhor. Como uma orientação, lembre-se:

  • o tempo para o primeiro byte deve ser inferior a 200 milissegundos
  • Iniciar O Render não deve ser superior a 2,5 segundos
  • O documento completo não deve ser superior a cinco segundos

É claro que estes valores são apenas regras de ouro. Também se resume sempre ao teu lado: Uma página de loja com 50 produtos - ou seja, 50 ou mais imagens e textos descritivos - carrega naturalmente mais devagar do que uma página de impressão constituída apenas por texto.

Por isso só posso adivinhar: Teste também os locais dos seus concorrentes directos e os seus modelos a seguir. Dessa forma, você obterá valores comparáveis dentro da indústria.

Cálculo de valores médios - Agora é hora de ir ao âmago da questão

Infelizmente, a visão geral explicada acima mostra apenas os resultados de uma única execução de medição. E você se lembra: valores únicos e isolados podem te desviar. É por isso que você fez pelo menos três medições consecutivas para testar o seu site. E os valores médios destas três medições 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 os valores médios requer apenas o premir de um botão:

Webpagetest resultados do plotting
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 visão geral é a mesma para todos os valores. Então, uma vez que você tenha entendido como lê-los, eles são tudo menos confusos.

Vista do Lote da Webpagetest
Estas parcelas ilustram perfeitamente porque é que deve sempre tirar várias medidas: 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 pode ver, os três valores medidos (1-3) estão representados em diagrama (a diferença entre o ponto de medição 1 e o ponto de medição 3 é particularmente notável!) 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). Este valor médio é 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 usar a pesquisa do seu navegador (CTRL+F para PCs e cmd+f para Macs) para encontrar o "First Byte" e o "Start Render".

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 valeu a pena o esforço, porque se podia vê-lo nos números dos diagramas: Dois testes com as mesmas configurações podem por vezes estar um segundo inteiro separados. Portanto, pode ser que seja essa a oportunidade a decidir se você investe tempo e dinheiro na otimização das suas páginas ou não. E especialmente se você ganha dinheiro com WordPress sua própria loja, empresa de web design ou agência, você deve ter a melhor base de dados para tal decisão.

Mas na verdade, ainda não estamos no fim. Porque agora você conhece os parâmetros de desempenho mais importantes do seu site, então você sabe quão rápido seu site carrega e se ainda há potencial para otimização, mas você não sabe exatamente onde seu site pode ser melhorado. E é exactamente para isto que serve a análise detalhada.

Passo 3: Análise detalhada

A visão geral já lhe diz muito sobre o seu site. 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 conhece 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 obter muitos detalhes sobre o seu site a partir de um diagrama de cachoeira com apenas um olhar. Aqui mostramos-lhe como ler correctamente os diagramas 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 olhar o glossário primeiro quando analisar seu site com webpagetest.org pela primeira vez. Explica todos os termos importantes da Análise de Desempenho.

Extracto 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 verde indica que o requisito está cumprido, um triângulo amarelo indica que há espaço para melhorias e uma cruz vermelha indica que a medida de otimização proposta está faltando.

Um extrato da lista de verificação de desempenho da Webpagetest.
Com a Optimization Checklist você pode, por exemplo, ver exatamente quais imagens do seu site ainda têm potencial de otimização, quais solicitações devem ser comprimidas ainda mais e se o seu caching funciona corretamente.

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

Embora tenha de lidar com estas avaliações detalhadas durante algum tempo, pode utilizá-las para obter uma imagem detalhada do seu site e do seu potencial de optimização.

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

Passo 4: Análise do tempo de carga percebido

Ao contrário de todos os outros testes conhecidos por nós, o Webpagetest é o único que mostra o tempo de carregamento percebido da sua página de graça. Você pode assistir a um vídeo da estrutura da página através da exibição em fita do filme. Desta forma, você pode ver exatamente o que seus visitantes vêem e pode avaliar ainda melhor se e como o seu site deve ser otimizado.

Webpagetest Encontrar Filmstripview
Encontrará o filme na vista geral do resultado da sua medição na extrema direita. Atenção: Esta opção nem sempre é exibida. Porque é que não está bem claro para mim. No entanto, a repetição do teste sempre disponibilizou esta opção.

O tempo de carregamento percebido é provavelmente o parâmetro mais importante do tempo de carregamento da sua página. Isso influencia se os seus visitantes saem da página cedo, a probabilidade de conversão e a experiência geral da sua página. Especialmente para as lojas, a velocidade percebida do site é, portanto, uma referência importante. É claro que o tempo de carregamento percebido deve ser sempre o mais curto possível.

Além da exibição do filme, você deve se lembrar do seguinte:

Representação esquemática do tempo de carregamento da página
O tempo de carga total percebido deve ser o mais curto 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á carregada pronta, mesmo que esteja longe de ser assim.

O Filstrip View mostra-lhe ao décimo de segundo mais próximo como é a sua página e quais os processos que estão em execução a qualquer momento. Se você olhar para o teste com estes dadosverá que nada se move desse lado por mais de três segundos. Mas então, de repente, a página parece quase a mesma que no estado final. O usuário fica com a impressão de que a página é carregada em 3,5 segundos. Ou, alternativamente, o visitante já tem a sensação, após 3,5 segundos, que pode interagir com a página.

Especialmente ao dar prioridade ao 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 o artigo você deve agora ser capaz de escolher as configurações certas para um teste de página web, saber quais métricas você tem que interpretar e como evitar interpretações erradas devido a outliers. Você também sabe onde encontrar informações detalhadas sobre a sua página e como determinar o tempo de carregamento percebido da sua página e como exibi-la.

Então você sabe o básico importante para obter uma visão geral 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 permitirão dar vida aos resultados das medições e tirar conclusões significativas para o seu site.

Mas porque é que isso era importante outra vez? Muito simplesmente: Sem um mensuração razoável do estado real de sua página, você não pode avaliar corretamente como sua página está atualmente carregando. E, por outro lado, faltam-lhe informações para a Otimização do tempo de carregamento.

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

RAIDBOXER da primeira hora e Chefe de Suporte. No Bar- e WordCamps ele gosta de falar sobre PageSpeed e o desempenho do site. A melhor maneira de suborná-lo é com um café expresso - ou pretzel bávaro.

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 * .