Um guia completo para usar o WebPageTest (e interpretar os resultados)

Todo site deve carregar o mais rápido possível. No entanto, alcançar um ótimo desempenho do site exige que você esteja no controle o tempo todo. Isso significa monitorar o desempenho do site, fazer alterações para melhorá-lo e garantir que cada página ofereça a melhor experiência possível ao usuário.

O WebPageTest pode ajudá-lo com isso. Com esta ferramenta, você pode executar testes de velocidade para qualquer página do seu site. Os relatórios de teste incluem informações sobre quais alterações você pode fazer para melhorar o desempenho, bem como dados históricos para ver se o site está melhor ou pior do que antes. Todas essas informações estão disponíveis gratuitamente.

Neste artigo, veremos mais de perto o WebPageTest e como você pode se beneficiar dele. Também mostraremos como executar testes e interpretar os resultados, discutir os prós e contras do uso da ferramenta e falar sobre preços. Vamos lá!

O que é WebPageTest?

O WebPageTest é uma poderosa ferramenta de código aberto projetada para ajudar proprietários e desenvolvedores de sites a monitorar e otimizar o desempenho de seus sites:

Ele fornece uma análise abrangente que inclui tempos de carregamento, velocidade de renderização e uso da rede. Você também obterá uma análise detalhada dos elementos individuais da página, permitindo identificar gargalos e áreas de melhoria.

Lançado em 2008, o WebPageTest é um dos mais antigos serviços de teste de desempenho para sites. No início, ele serviu como uma ferramenta de teste interno dentro da AOL (sim, é tão antigo).

Logo depois, o WebPageTest foi lançado sob uma licença de código aberto. Em 2011, foi lançado o site do serviço.

Desde então, expandiu seu conjunto de ferramentas. Agora, também oferece testes móveis e uma API que permite integrar testes com seus próprios projetos.

Principais recursos do WebPageTest:

• Testes simulados de diferentes locais ao redor do mundo
• Suporte para uma variedade de navegadores, incluindo Chrome, Firefox e Safari
• Análise da renderização da página da Web e do processo de carregamento, incluindo gráficos em cascata e tiras de filme
• Configurações de teste personalizáveis, como velocidade de conexão e resolução de tela
• Métricas avançadas, incluindo índice de velocidade, tempo até o primeiro byte (TTFB) e primeira pintura de conteúdo (FCP)

Você pode usar o WebPageTest gratuitamente. O serviço oferece um nível gratuito que permite executar centenas de testes por mês e obter resultados detalhados.

Por que você deve usar o WebPageTest

Existem muitos serviços de desempenho de sites disponíveis. Muitos deles são gratuitos e os dados que você obtém dependerão muito do serviço que você usa.

No entanto, o WebPageTest oferece muito mais benefícios do que as ferramentas comuns. Vejamos alguns deles:

• Identifique problemas de desempenho. O WebPageTest ajuda a identificar possíveis gargalos e áreas de melhoria, permitindo que você faça otimizações direcionadas ao seu site.
• Melhore a experiência do usuário. Os sites de carregamento mais rápido fornecem uma melhor experiência do usuário, o que pode levar a um maior envolvimento e conversões do visitante. Os visitantes podem não perceber se o seu site carrega rápido, mas perceberão se for lento.
• Aumente as classificações dos mecanismos de pesquisa. A velocidade do site é um fator de classificação para mecanismos de pesquisa como o Google, e sites mais rápidos tendem a ter uma classificação mais alta nos resultados de pesquisa.
• Monitore o desempenho ao longo do tempo. Testes regulares com WebPageTest permitem rastrear tendências de desempenho e identificar qualquer regressão antes que se tornem problemas importantes. Você pode monitorar os dados de desempenho de mais de um ano usando o plano gratuito, que é mais do que suficiente para detectar tendências.

Além disso, WebPageTest apresenta os resultados de forma clara. Isso é incrivelmente valioso se você for novo no mundo dos testes e otimização de desempenho:

Além desses breves resumos, você obterá alguns números concretos relacionados ao desempenho do seu site. Na próxima seção, mostraremos como interpretar esses resultados.

Acreditamos que todos devem usar ferramentas de teste e monitoramento de desempenho de página. Isso é particularmente importante se você fizer grandes alterações em seu site, como atualizações de design e funcionalidade ou migração para um novo host. A execução de testes regulares juntamente com outras estratégias de otimização, como o uso de uma rede de entrega de conteúdo (CDN), ajudará a manter seu site em perfeitas condições.

Como usar o WebPageTest

Executar um teste usando WebPageTest é simples. Para começar, você precisará se inscrever em uma conta gratuita, que não exige que você insira informações de pagamento.

Depois de fazer login, retorne à página inicial e procure a opção Iniciar um teste de desempenho do site . Insira a URL da página que deseja testar e selecione uma configuração:

Para obter os resultados mais abrangentes, recomendamos a execução de testes móveis e de desktop. Além disso, convém usar o local de teste mais próximo do servidor do seu site para que os resultados não sejam distorcidos pela distância.

Se nenhum dos locais padrão funcionar para o seu teste, selecione a opção Configuração avançada . Isso permitirá que você escolha entre outros locais de teste e insira parâmetros avançados:

Quando estiver satisfeito com as configurações, clique em Start Test . Os resultados levarão alguns segundos para serem gerados e, assim que o fizerem, você terá acesso a um relatório de desempenho detalhado.

Como interpretar os resultados do WebPageTest

Um dos maiores problemas com ferramentas como WebPageTest é que elas lançam muitas informações para você depois de executar um teste. Isso não é um problema se você souber em quais métricas focar. No entanto, pode ser intimidante se você estiver usando o serviço pela primeira vez.

Quando se trata de interpretar os resultados, sugerimos que você se concentre em três áreas principais dos relatórios do WebPageTest. A primeira é a seção Resumo de desempenho , que fornece uma visão geral dos resultados do seu site. Ele mostrará a posição do seu site em termos de desempenho, usabilidade e resiliência:

Você pode clicar nos ícones abaixo de cada categoria para ver mais informações. Cada categoria incluirá detalhes sobre os elementos que foram testados e os resultados. Se houver um problema com o site, o relatório mencionará qual elemento o causou e fornecerá recomendações sobre como corrigi-lo:

Depois de retornar à página principal do relatório, role para baixo até a seção Métricas de desempenho da página . Aqui, você encontrará várias métricas que mostram quanto tempo seu site leva para carregar e ficar funcional:

Se você não tem certeza do que cada uma dessas métricas significa, aqui está um resumo rápido:

• Tempo para o primeiro byte (TTFB) . Essa métrica mede quanto tempo leva para o site responder à solicitação inicial do navegador. Servidores lentos podem demorar um pouco para responder, o que aumenta o tempo geral de carregamento do site.
• Iniciar renderização. Isso informa quanto tempo leva para a página começar a exibir elementos visuais. O site pode estar carregando em segundo plano, mas até que os usuários vejam algo, eles podem não saber se a página está funcionando corretamente.
• First Contentful Paint (FCP) : é o tempo que o navegador leva para renderizar a primeira parte do conteúdo da página. Um FCP mais baixo indica um site de carregamento mais rápido.
• Índice de velocidade. Uma pontuação composta que representa a rapidez com que o conteúdo da página fica visível para os usuários. Quanto menor a pontuação, melhor.
• Maior pintura de conteúdo (LCP) . Essa métrica informa quanto tempo leva para renderizar o maior elemento em uma página. Geralmente é um bom indicador do tempo geral de carregamento da página.
• Deslocamento Cumulativo de Layout (CLS) . Essa pontuação informa o quanto o layout de uma página “muda” ou muda conforme ela é carregada. Quanto mais ele muda, pior a experiência do usuário. Zero é o número que você deve apontar aqui.
• Tempo total de bloqueio. Com essa métrica, você pode ver quanto tempo leva até que a página se torne utilizável. Pode ser renderizado visualmente, mas a página pode estar carregando scripts em segundo plano, o que impede que os visitantes a usem.

Seguindo em frente, a seção Métricas de uso do mundo real mostra uma visão geral das mesmas métricas em comparação com dados de teste recentes de outros usuários (se estiverem disponíveis). Para obter uma visão completa do desempenho do seu site, sugerimos que você compare essas métricas com a seção Métricas de desempenho da página anterior.

Idealmente, os resultados deste último devem ser semelhantes ou melhores:

Por fim, recomendamos que você revise o gráfico em cascata, que mostra o processo de carregamento de cada elemento da página. Isso pode ajudá-lo a identificar recursos específicos que estão causando atrasos ou podem ser otimizados para melhor desempenho.

Depois de identificar as áreas de melhoria, você pode fazer alterações direcionadas ao seu site, como otimizar imagens, reduzir arquivos CSS e JavaScript ou implementar o armazenamento em cache.

Você deve usar o WebPageTest para o seu negócio?

Se você tiver um site, convém executar testes de desempenho regulares para garantir que ele ofereça uma boa experiência ao usuário. Você pode usar qualquer ferramenta de desempenho de sua preferência, mas vamos ver os motivos pelos quais recomendamos o WebPageTest.

Para pintar um quadro completo, também falaremos sobre os contras de usar o serviço.

Prós do WebPageTest

• Análise abrangente. O WebPageTest fornece informações detalhadas sobre o desempenho do seu site, facilitando a identificação de áreas para melhoria.
• Testes personalizáveis. A ferramenta oferece suporte a uma variedade de navegadores, locais e configurações de teste, permitindo simular diferentes experiências do usuário. Você pode personalizar as configurações de teste o quanto quiser ou usar as opções padrão fornecidas pelo serviço se desejar uma visão geral rápida.
• Gratuito e de código aberto. Somos grandes fãs de software de código aberto, portanto, usar o WebPageTest é uma vantagem. Embora o serviço ofereça um nível premium, o plano gratuito é mais do que suficiente para a maioria dos sites.
• Dados históricos de desempenho. Com o WebPageTest, você obtém acesso a 13 meses de dados de teste para todos os sites em que usa o serviço. Essas informações são mais do que suficientes para monitorar as tendências de desempenho da maioria dos sites.
• Recomendações de melhoria de desempenho. O WebPageTest fornece recomendações ou “oportunidades” para melhorar o desempenho do site, dependendo de quais problemas ele detecta em seu site. Essas recomendações incluem explicações sobre a importância de cada alteração.

Desvantagens do WebPageTest

• Inscrição necessária. Embora o WebPageTest ofereça um plano gratuito abrangente, você deve se inscrever no serviço para executar testes. No entanto, o serviço não solicita informações de pagamento durante o processo de inscrição.
• Curva de aprendizado. WebPageTest fornece uma riqueza de dados, que pode ser esmagadora para usuários que são novos na otimização de desempenho da web. No entanto, em comparação com outras ferramentas semelhantes, a curva de aprendizado é muito mais tolerante com o WebPageTest.
• Automação limitada. Embora seja possível automatizar o WebPageTest por meio de sua API, isso pode exigir configuração adicional e conhecimento de codificação em comparação com algumas outras ferramentas com recursos de automação integrados.
• Não há instruções para melhorias de desempenho. Isso é um pouco comum entre as ferramentas de teste de desempenho do site. Com o WebPageTest, você obtém recomendações diretas de oportunidades para melhorar o desempenho do seu site. No entanto, essas recomendações não vêm com instruções de como implementá-las. Isso significa que você precisará pesquisar tópicos como adiar JavaScript de bloqueio de renderização ou outros tópicos técnicos avançados.

Preços do WebPageTest

O WebPageTest oferece planos gratuitos e premium. O plano gratuito permite que você execute generosos 300 testes por mês. Além disso, a plataforma armazena 13 meses de dados de teste para usuários gratuitos e premium:

Em termos de vantagens, os usuários do plano premium podem executar mais testes. Você também terá prioridade caso o serviço esteja lotado (o que não é comum). Além disso, se você deseja obter acesso à API para WebPageTest, precisará pagar por um plano premium.

Como o WebPageTest se compara a outras ferramentas de teste de velocidade do site

Como mencionamos anteriormente, existem muitas outras opções para ferramentas de teste de velocidade do site. Duas das alternativas mais populares do WebPageTest são Google PageSpeed ​​Insights e Pingdom Tools.

Vejamos como o WebPageTest se compara com as duas opções.

Google PageSpeed ​​Insights

Desenvolvido pelo Google, esta ferramenta fornece uma pontuação de desempenho simples e oferece recomendações de otimização específicas. Os resultados são detalhados da mesma forma quando comparados com WebPageTest.

No entanto, WebPageTest examina cada página várias vezes durante cada execução. Além disso, permite executar testes personalizados, um recurso que o PageSpeed ​​Insights não oferece.

Ferramentas Pingdom

Esta ferramenta é perfeita se você deseja executar testes rápidos com uma escolha decente de servidores. Ao contrário do PageSpeed ​​Insights ou do WebPageTest, o Pingdom não fornece uma análise detalhada das oportunidades de melhoria ou problemas com seu site. Em vez disso, você terá uma visão geral do desempenho do seu site pelos números, o que pode ser tudo o que você precisa de tempos em tempos.

Em nossa experiência, você pode obter os melhores resultados de desempenho executando testes regulares usando diferentes ferramentas. No entanto, se você for usar um único serviço, o WebPageTest pode fornecer os resultados mais abrangentes quando comparado a alternativas como PageSpeed ​​Insights e Pingdom Tools.

Resumo

Monitorar o desempenho é essencial se você deseja manter seu site funcionando da melhor forma possível. Isso significa realizar testes de velocidade regulares e tomar medidas para melhorar os tempos de carregamento.

Embora existam muitas ferramentas que você pode usar para monitorar o desempenho da página, recomendamos o WebPageTest. O serviço é gratuito e fornece relatórios detalhados. Além disso, você pode armazenar dados de teste por até 13 meses, o que significa que você pode obter uma visão geral do desempenho do seu site ao longo do tempo.

Na Kinsta, somos obcecados por velocidade! Nossos clientes obtêm um aumento de velocidade de até 20% simplesmente migrando para nosso serviço de hospedagem. Oferecemos 35 data centers à sua escolha e nosso CDN tem mais de 275 POPs. Entre em contato conosco para saber mais!