Pingdom – Ferramenta de Análise de Performance Web

O Pingdom é uma ferramenta completa de análise de performance web. Com ela você pode medir o desempenho do seu site e descobrir quais fatores estão deixando-o lento, obtendo ainda sugestões para melhorar não somente a velocidade de carregamento, mas também a experiência de navegação do usuário.

A versão premium para assinantes permite monitorar continuamente vários sites, analisando pontos críticos de desempenho e recebendo notificações em caso de problemas. No entanto, há uma versão gratuita na qual você pode testar e analisar alguns fatores que podem estar prejudicando a performance do seu site.

Para realizar esta análise gratuitamente basta acessar https://tools.pingdom.com, digitar a url do seu site no campo indicado e clicar em “Start Test”.

Para melhor compreensão da ferramenta e entendimento na aplicação das técnicas de otimização, utilizarei aqui como exemplo o mesmo site (http://etecitapira.com.br) que utilizei em todos os artigos desta série.

pingdom-01-analise-inicial

Após clicar em “Start Test” o Pingdom levará alguns segundos até realizar a análise completa do seu site, e no final apresentará o resultado de acordo com os critérios da análise de desempenho.

Neste momento o site que estamos utilizando como exemplo possui diversos itens para melhorar a sua performance web. Veja a seguir o resultado do teste de performance apresentado pelo Pingdom.

pingdom-02-analise-inicial

Performance grade é uma nota e uma pontuação global atribuída à página levando em consideração todos os critérios de desempenho avaliado pela ferramenta. A nota “D” indica uma baixa pontuação relativa aos 68 pontos obtidos no teste de performance;

Load time é o tempo de carregamento total de renderização da página. O valor de 7.96 segundos é considerado um valor bem acima do recomendado.

Faster than é uma estimativa em porcentagem de quão rápido é o seu site se comparado com a média de sites da internet. Ser mais rápido que apenas 17% dos sites é uma porcentagem muito ruim.

Page size é o tamanho total dos arquivos que compõe o site. O valor de 5.2 MB também é considerado um valor bem acima do recomendado dependendo dos recursos utilizados no site.

Requests é a quantidade de requisições que o navegador precisa solicitar ao servidor web para carregar todos os recursos necessários. Quanto menor o número de requisições, melhor será para a performance da página.

Tested from indica apenas a localidade de onde surgiu o ping para a realização do teste de performance.

 

Dicas do Pingdom para melhorar a performance

Como você pode observar o Pingdom faz a análise de uma página e na seção de Performance Insights oferece sugestões para torná-la mais rápida. E, entre os itens apontados, o ponto mais crítico no nosso site de exemplo é sem dúvida o Leverage browser caching.

The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:

pingdom-03-analise-inicial

Neste tópico o Pingdom detecta se a resposta do servidor possui uma política de cache a ser utilizada, ou seja, se é definido ao navegador o tempo de armazenamento de recursos estáticos transferidos anteriormente que podem ser reutilizados sem a necessidade de novos downloads.

Explicando melhor: Quando um internauta acessa uma determinada página o navegador faz uma solicitação ao servidor por arquivos (html, css, imagens, javascript, etc) que compõem esta página. O servidor, por sua vez, envia os arquivos solicitados conforme eles são requeridos.



Esta comunicação entre o navegador e servidor web para transferir os arquivos exige múltiplas viagens de ida e volta, que se for em excesso pode ocasionar lentidão na renderização da página.

Para otimizar então este processo o servidor web utilizar-se de um sistema de cache no navegador, que consiste em armazenar arquivos no computador do usuário que podem ser reutilizados em novas visitas.

Para aprender sobre como utilizar o cache de navegador e verificar os impactos desta ação leia o artigo “Como aproveitar o cache do navegador”.

Para aprender sobre server cache e browser cache leia o artigo “Diferenças entre cache do navegador e server cache”.

 

Outros dados úteis do Pingdom

A análise realizada pelo Pingdom oferece ainda outros dados que são muito úteis para o desenvolver preocupado com a Performance Web dos seus sites. Duas áreas que merecem muito a nossa atenção são Content size by contente type e Requests by contente type.

pingdom-05-analise-inicial

Observando o primeiro quadro podemos conferir que o nosso site é composto basicamente por 60% de imagens, 25% de script e o restante por códigos HTML, CSS e outros.

E analisando ainda a seção File Requets temos o seguinte gráfico:

pingdom-06-analise-inicial

Neste gráfico observamos a fila de requisições que são realizadas para carregar o site, e cada barra horizontal representa visualmente o tempo de cada recurso a ser baixado e renderizado no navegador do usuário.

Sem muito esforço podemos perceber no gráfico algo completamente fora do padrão na última linha. Quando o navegador faz a requisição da imagem “banner-full-etec.png” a fila de requests praticamente fica parada aguardando o download da imagem por vários segundos.

Como pudemos observar utilizando a PageSpeed Insights o nosso site de exemplo possui várias imagens que podem ser otimizadas reduzindo o tamanho do arquivo sem afetar a qualidade visual. E, com certeza, essa imagem “banner-full-etec.png” com 1.8 MB é um dos gargalos que deixam o site lento. É imprescindível então encontrar uma solução para este caso para melhor a performance web deste nosso site.

Para aprender sobre otimização de imagens e verificar os impactos desta ação leia o artigo “Otimização de imagens com Tinypng”.

Continue lendo esta série no artigo Otimização de imagens com Tinypng