Análise de desempenho com WebPageTest

Um site rápido é agora uma necessidade absoluta. Em uma era móvel e, com consumidores internados, um site lento pode ser a diferença entre o sucesso ou o fracasso do seu negócio. Então, como exatamente você testa a velocidade do seu site e como pode identificar quaisquer problemas que possam estar deixando-o lento?

Neste artigo, veremos uma ferramenta popular chamada WebPageTest. Essa ferramenta de medição fornece uma série de estatísticas e dados detalhados que podem ser usados ​​para identificar áreas do seu site que podem ser melhoradas do ponto de vista do desempenho. O grande volume de informações fornecidas, no entanto, pode ser um pouco esmagador. Não se preocupe... vamos detalhar como usar o WebPageTest passo a passo para que fique claro como aproveitar ao máximo esta ferramenta gratuita.

Introdução ao WebPageTest

Primeiro, vá para webpagetest.org para começar. O layout é super claro e você verá imediatamente uma caixa onde poderá inserir o URL do seu site.

Você tem uma escolha a fazer no início... você usa a guia padrão 'Teste Avançado' ou vai para a guia 'Teste Simples'? Bem, o recurso Teste Simples é ótimo para uma visão geral rápida do seu site, mas para este artigo veremos a guia Teste Avançado.

Configurações de teste avançadas

Role a página para baixo e você verá um menu suspenso Local de teste. Isso é bem autoexplicativo. O local que você deseja escolher é o mais próximo de onde seu público-alvo está localizado. Se eles estão sediados na Austrália, os testes de Londres, Reino Unido, não fazem muito sentido. O objetivo deste exercício é descobrir como nosso site funciona para nossos usuários.

Há uma tonelada de locais, mas alguns locais oferecem mais opções de teste do que outros na forma do navegador usado para o teste. Novamente, você quer tentar selecionar um que provavelmente será usado pelo seu público-alvo. Para visualizar algumas estatísticas de quais navegadores seu site é visitado, você pode usar ferramentas como o Google Analytics.

Outras configurações muito legais que você pode selecionar são coisas como a conexão. Então, é assim que o dispositivo do usuário final está conectado à Internet. Clique no menu suspenso ao lado de 'Conexão' e você verá opções que incluem uma conexão 3G (lenta ou rápida). Isso é muito legal, pois dá a você uma sensação do mundo real de como seu público experimentará seu site.

Outra configuração bastante útil é a opção 'Repeat View'. Essa opção, quando ativada, significa que o site será testado novamente após o primeiro carregamento, o que ajuda a mostrar o impacto de qualquer armazenamento em cache que você ativou em seu site.

Há uma série de opções avançadas que você pode querer explorar. Para a maioria de nós, a menos que você esteja se aprofundando no teste do seu site, as configurações descritas acima serão suficientes. Para aqueles que querem saber mais sobre as configurações reais disponíveis, confira os documentos do WebPageTest.

Anote qualquer uma das configurações que você alterou. É importante que durante o teste e depois a fase de otimização você continue testando novamente usando as mesmas configurações, caso contrário você distorcerá os resultados que está obtendo. Quando estiver pronto, pressione o botão 'Iniciar teste' e depois sente-se e aguarde os resultados (normalmente leva cerca de um minuto).

Primeira tela

Neste exemplo, usamos o site da Apple (apple.com) e o testamos em uma conexão 3G rápida de Londres, Reino Unido. Os resultados iniciais são mostrados abaixo:

Dê uma olhada no canto superior direito e você verá 7 caixas coloridas que fornecem uma visão geral inicial do desempenho da página. Vamos examinar o que cada um deles é.

Caixa 1 - Pontuação de Segurança

Este é um recurso recente fornecido pelo WebPageTest, que na verdade é uma integração com o Snyk e fornece uma visão da segurança de um site. Se você clicar na caixa colorida, será levado ao site synk.io, que contém uma análise detalhada do site em questão do ponto de vista da segurança. De particular interesse são os cabeçalhos de segurança HTTP que são trocados entre um cliente e um servidor para definir os detalhes de segurança da comunicação. Os mais importantes são Segurança de Transporte Estrita, Política de Segurança de Conteúdo, Opções de X-Frame.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Se algum cabeçalho de segurança vital estiver faltando em seu site, você será informado sobre isso no site da Synk.

Caixa 2 - Hora do Primeiro Byte

A segunda caixa fornece o Primeiro Byte Time (também conhecido como Time to First Byte ou TTFB). Este é o tempo necessário até que o servidor responda com o primeiro byte de dados de volta à solicitação do cliente. Idealmente, você apontaria para uma figura abaixo de 300ms. Esse valor está mais relacionado ao servidor e é irrelevante para o tempo gasto para que os arquivos do seu site sejam renderizados. Ele pode ser afetado por um servidor DNS lento, por exemplo, ou cache insuficiente.

Neste ponto, é importante observar que, se você tiver o cache ativado, execute novamente o teste da página da Web para que o conteúdo armazenado em cache seja medido. Na verdade, é recomendável que você execute o teste pelo menos 3 vezes para garantir que os resultados reflitam totalmente o conteúdo em cache em seu site.

O tempo do primeiro byte é a soma de três valores: o tempo necessário para que a solicitação HTTP seja enviada, o tempo para ser processado pelo servidor e o tempo que o servidor precisa para enviar o primeiro byte de volta ao cliente. Você pode obter mais detalhes sobre isso clicando na caixa:

Como podemos ver, o site da Apple não se saiu muito bem nesta parte específica do teste.

Uma vez que esta conexão tenha sido feita, os recursos podem começar a ser entregues. Os motivos mais comuns para um TTFB lento são os problemas de rede, a configuração do servidor web, possíveis E/S de disco do servidor e problemas de RAM.

Caixa 3 – Mantenha-se Vivo

A caixa 'Keep-alive Enabled' mostra o estado do cabeçalho HTTP keep-alive. Quando este cabeçalho estiver habilitado, os dados serão transferidos usando a mesma conexão, caso contrário, uma nova conexão deve ser criada para cada arquivo a ser transferido. Keep-alive é ativado por padrão na maioria dos casos e geralmente é uma configuração do lado do servidor. se você precisar habilitá-lo você mesmo pode editar seu arquivo .htaccess e inserir o código abaixo

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Caixa 4 - Transferência de Compressão

O valor Compress Transfer representa o status da compactação Gzip. Esta é uma técnica usada para compactar e depois descompactar seus arquivos estáticos em tempo real. Desta forma, o tempo de transferência é reduzido porque o tamanho do arquivo é reduzido. Se o seu provedor de servidor não aplica essa tecnologia por padrão, você pode fazê-lo especificando a regra correspondente para cada tipo de arquivo assim:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Novamente, clicar na caixa colorida relevante o levará a uma seção de visão geral detalhada para que você possa ver exatamente o que está acontecendo em seu site.

Caixa 5 – Comprimir Imagens

A caixa Compactar imagens é bastante auto-explicativa. Clique nele e ele mostrará quais imagens podem ser melhor compactadas.

Nesse caso, o WebPageTest identificou três imagens que ele acha que podem ser compactadas com sucesso, economizando ainda mais 54kb em dados que não precisam ser transferidos. Isso pode não parecer muito, mas em um celular cada kb que você pode salvar faz a diferença.

As imagens são o aspecto que mais consome espaço do seu conteúdo estático. Compactá-los é uma necessidade absoluta. A análise do WebPageTest facilita a identificação de quais imagens podem estar deixando seu site mais lento e, portanto, precisam de atenção.

Caixa 6 – Conteúdo estático em cache

Se você clicar na caixa 'Cache de conteúdo estático', você será levado a uma seção detalhada chamada 'Aproveite o cache do navegador de ativos estáticos'.

O cache do navegador pode ser aproveitado por seu desenvolvedor ou administrador instruindo o navegador da Web quando armazenar em cache um recurso, quando não fazê-lo e por quanto tempo com o uso dos cabeçalhos HTTP corretos. Você pode encontrar algumas informações mais detalhadas sobre o cache do navegador em nosso artigo 'Como funciona o cache do navegador?'. Você também pode descobrir como o Pressidium implementa o cache do navegador aqui.

Caixa 7 – Uso efetivo da CDN

Vale a pena usar uma CDN (ou Content Delivery Network) se você tiver uma base de usuários espalhada geograficamente. Se, por exemplo, todos os seus clientes estiverem baseados em Londres e seu servidor host também estiver localizado em Londres, provavelmente não há muito sentido em usar um CDN. Se, no entanto, seus usuários forem mais diversificados geograficamente, uma CDN pode fazer uma enorme diferença no desempenho do seu site para esses usuários, colocando uma cópia do seu site em um servidor localizado mais próximo deles.

Se você estiver usando um CDN, o WebPageTest analisará a eficácia com que isso está funcionando.

Resultados de desempenho

Vamos dar uma olhada em mais alguns dados começando com os resultados de desempenho que você verá na parte superior da guia Resumo.

Nos resultados de desempenho, podemos ver as visões gerais mais importantes para coisas como o tempo do primeiro byte, o índice de velocidade, que é o tempo médio em que as partes visíveis da página são exibidas, o deslocamento de layout cumulativo (CLS) para medir a estabilidade visual, o tempo consumido até que o Documento seja carregado totalmente e mais.

Visualização da Cachoeira

Logo abaixo dos Resultados de Desempenho, podemos ver a visualização em cascata para cada uma de suas execuções. Se você clicar em qualquer um deles, você será direcionado para a página que contém todos os detalhes da corrida em formato cascata.

Você receberá todas as estatísticas de desempenho para cada ativo individual do seu site. Estes são coloridos de forma diferente, tornando mais fácil distinguir entre eles. Se você clicar em qualquer um desses, um pop-up será aberto com ainda mais detalhes.

A Exibição em cascata é uma representação visual da página e de como o componente de alcance é carregado. Isso nos permite identificar facilmente quaisquer componentes que possam estar retardando as coisas. É muito útil poder ver onde estão os gargalos e significa que podemos corrigir problemas com precisão em vez de ter que adivinhar.

Visualização de conexão

O quadro Connection View também é um recurso muito útil, pois permite identificar problemas de desempenho da Web com muita facilidade, resumindo visualmente as medidas das conexões entre o navegador e o servidor.

Você pode ver o status da conexão diretamente do DNS, conexão inicial, negociação SSL até coisas como recursos de vídeo. Abaixo disso, há também um gráfico que mostra o uso da CPU no dispositivo que está carregando o site. Há também um indicador de largura de banda mostrando os níveis usados ​​durante a renderização de dados.

Detalhes das solicitações

Por fim, abaixo da Visualização de Conexão, você recebe mais duas placas de análise – Detalhes da Solicitação e Cabeçalhos da Solicitação.

O quadro Request Details é muito útil e lista todos os recursos solicitados juntamente com dados relevantes para essa solicitação, como o tipo de conteúdo, a hora de início da solicitação, o número de bytes baixados e muito mais. Esta tabela é realmente classificável... basta clicar nos cabeçalhos das colunas para ordenar por essa coluna em particular.

O quadro de cabeçalhos de solicitação fornece (sim, você adivinhou) a lista de recursos de solicitação junto com as informações do cabeçalho. Clique em cada um para obter detalhes completos.

Conclusão

Se você precisa de uma análise aprofundada da atividade do seu site, o WebPageTest é uma ferramenta fantástica para usar. Mesmo que você não se aprofunde nas informações que ele fornece, você pode ter uma ideia rápida se o seu site está funcionando bem ou não e se há necessidade de examinar mais de perto o desempenho dele. E o melhor de tudo, é grátis!