Sei que esse tema é bastante abordado em vários outros sites, porém sempre que procurei sobre esse assunto, me deparei com várias páginas com conteúdo repetido, abordando de forma superficial ferramentas e fatores que influenciam no tempo de carregamento. Nada muito prático e que tenha me ajudado nesse contexto.

Aqui, nesse post, venho compartilhar minha experiência com algumas ferramentas que faço uso no meu dia a dia como desenvolvedor e responsável pela infraestrutura de um e-commerce, onde a performance e desempenho da loja deve ser a melhor possível. Pois, perder um usuário por velocidade de carregamento de páginas significa perder receita.

Neste post, vou listar as 3 principais ferramentas que uso quando desejo medir o desempenho e velocidade de um determinado site/página, além de mostrar para quais métricas dou prioridade em observar e otimizar.

As ferramentas que irei falar são gratuitas e são as seguintes:

1- WebTestPage

2- Pingdom

3- Google PageSpeed Insights

WebTestPage

Com a ferramenta WebTestPage é possível escolher qual o local da simulação, como por exemplo: América do Norte, América do Sul, etc., e ainda qual o browser que irá executar os testes. Após isso, a ferramenta apresenta várias métricas que medem a performance de seu site, além de apresentar algumas dicas de como otimizar. 

Logo de cara, você deve se atentar para as informações contidas no topo. Olhe as métricas de First Byte Time (também conhecida como Time To First Byte) e Compress Image. A primeira métrica mede o tempo decorrido desde da requisição até o primeiro byte de resposta, essa métrica pode te ajudar a entender algum problema de performance com o seu servidor. Ou seja,se ele está demorando a entregar o resultado, etc. A segunda métrica vai te mostrar como estão suas imagens em termos de otimização. O motivo de ter sinalizado essa métrica é que a presença de muitas imagens, e estas ainda sendo imagens não otimizadas, pode atrapalhar demais a performance do seu site.

A próxima seção é um resumo mostrando algumas métricas bem importantes. Algumas delas são: o First Byte Time, citado anteriormente, porém aqui a ferramenta diz o tempo em segundos até receber a resposta da requisição. O First Contentful Paint, também exibido em segundos. Essa métrica diz respeito a exibição do primeiro elemento que se torna visível para o usuário, como por exemplo a visualização de uma barra de navegação, um texto, uma imagem, etc. Uma outra métrica que merece atenção é o Largest Content Paint, ela informa o tempo, em segundos, que o maior bloco de conteúdo existente em sua página demorou para ser renderizado na tela. Ela é muito importante, pois tende a determinar quando o conteúdo principal terminou de ser renderizado na tela e está disponível para o usuário. Essa métrica, juntamente com a First Contentful Paint, são bem importantes, pois são métricas centradas no usuário. Conseguir boas notas para essas métricas, significa que seu site tende a possuir uma boa experiência para com o usuário. Ainda nesse resumo de métricas, você consegue ver a quantidade de requisições realizadas e o tempo até que sua página esteja completamente carregada.

Seguindo a análise, a ferramenta apresenta gráficos estilo Waterfall, exibindo as requisições e seus tempos de respostas. Muita atenção com esses gráficos, eles exibem várias informações que são bem importantes. Uma que merece atenção é a informação sobre o DNS Lookup. O que essa métrica significa? Todo conteúdo da internet está em servidores, ou seja, máquinas que podem ser acessadas através de um IP público. Mas quando inserimos um endereço na barra de endereços de nosso navegador, não passamos a sequência de números referentes ao IP. Quando inserimos o endereço de um site na barra de endereços, estamos colocando o domínio que queremos acessar. Por exemplo, commitando.com.br. O computador leva um tempo para traduzir esse nome em um número, ou seja, leva um tempo até identificar para qual máquina ele deverá realizar a requisição. O tempo decorrido em receber um domínio e achar o seu IP é o tempo de DNS Lookup. Para um melhor entendimento podemos comparar esse cenário com uma ligação para uma pessoa. Primeiro, você deverá consultar a sua agenda telefônica para saber qual o número de telefone da pessoa para a qual deseja realizar a ligação.

Agora, por que ele é importante? Imagine que seu site acesse vários domínios diferentes buscando por conteúdo para compor a sua página. Para todos os domínios deverá ser “perdido” um tempo para buscar o IP referente a esse domínio. E isso pode levar alguns segundos, afetando na performance de seu site. Analisando bem essa métrica podemos chegar a algumas conclusões: conseguimos entender se estamos perdendo muito tempo nessa tradução e ainda quais domínios que são acessados que mais tempo é gasto para realizar essa tradução.

Ainda nessa visão, a ferramenta apresenta todas as requisições realizadas e seus tempos de resposta, de carregamento de conteúdo, execução de código, etc. Esteja atento para essas medidas, pois elas são importantes para você perceber onde melhorar. Evite muitas requisições, evite requisições que demoram para responder, tenha uma baixa latência na hora de transmitir um conteúdo, etc.

Pingdom

Outra ferramenta, similar a anterior, é a Website Speed Test da Pingdom, outra ferramenta bem popular e gratuita para verificar o desempenho e performance de seu site. Com ela também é possível simular acessos de diversas partes do mundo, assim como a ferramenta apresentada anteriormente..

Logo de cara, além do tempo de carregamento de sua página, essa ferramenta também fornece o número de requisições realizadas para montar a sua página e o tamanho em KB de sua página, lembre-se que páginas mais leves, tendem a ser carregadas de forma mais rápida.

Uma visualização bem interessante apresentada por essa ferramenta são os gráficos de: tamanho do conteúdo e requisições realizadas classificados pelo tipo e domínio. Os tipos podem ser arquivos de imagens, arquivos javascript, arquivos de estilo, etc. E os domínios são todos os diferentes domínios que seu site faz requisição, como por exemplo Google, Font Awesome, etc.

Essa é uma visualização bem útil, pois com esses gráficos é possível fazer um comparativo e verificar pontos de melhoria. Por exemplo, se estou gastando muito tempo para carregar as imagens, posso verificar se consigo reduzir a quantidade de imagens ou otimizá-las, ou ainda fazer um carregamento no estilo “lazy load” (carregar um determinado conteúdo apenas quando for necessário ou quando o usuário interagir). Ou ainda, verificar se o domínio, onde as imagens estão armazenadas, está respondendo em um tempo considerado bom.

Uma outra informação bem importante é a quantidade de requisições e seus códigos de respostas. Para toda requisição realizada, o servidor responde com um determinado código. Garanta sempre que todos os códigos de resposta sejam 200, ou seja, OK. Elimine, por exemplo, códigos 300, 301, etc, que são códigos relacionados com redirecionamentos, arquivos movidos, etc. Evitando esse tipo de resposta em sua requisição, você irá melhorar a performance de seu site, além de contribuir por um site mais bem indexado no Google. A ferramenta da Pingdom também fornece uma lista das requisições e seus códigos de resposta, porém quando existem muitas requisições pode ficar difícil achar códigos diferentes do de número 200. Pensando nisso, a ferramenta disponibiliza um resumo com a quantidade de requisições distribuídas pelos códigos.

A ferramenta ainda traz um gráfico waterfall de todas as requisições junto com os seus tempos de carregamento, porém é um gráfico semelhante ao que a ferramenta anterior apresenta, dessa forma dê preferência para analisar o waterfall anterior, pois é mais completo.

Google PageSpeed Insights

A última ferramenta que vou abordar nesse post é o PageSpeed Insights. É uma ferramenta Google e por esse motivo ela é extremamente importante. Apesar de suas métricas serem semelhantes às métricas apresentadas nas ferramentas anteriores, ela é a forma como o Google enxerga o seu site ou página. Assim, sempre é bom checar como o seu site está aos olhos do Google, afinal um bom site avaliado em termos de performance pelo Google tende a ser um site mais bem ranqueado nas páginas de resultado de busca do Google.

Como já falado, as métricas apresentadas por essa ferramenta são semelhantes às outras métricas das ferramentas anteriores, porém três pontos merecem destaques aqui: 

→ O primeiro é o olhar do Google para com o seu site. 

→ O segundo ponto são as dicas dadas pela ferramenta como forma de melhorar e otimizar o seu site. Dicas essas que podem ser concluídas olhando para o conjunto de métricas já analisados aqui, porém caso você queira um material mais “pronto” pode usar essas dicas do Google. 

→ O terceiro ponto e muito importante é que o Google PageSpeed Insights apresenta uma visão separada de pontuação para o comportamento de seu site no desktop e em dispositivos móveis. Isso é muito importante, pois como é sabido, atualmente a maioria dos acessos a sites é realizado pelos celulares ou tablets e, como o Google sabe muito bem disso ele dá mais valor para sites que possuam uma boa navegação nos dispositivos móveis. Dessa forma, se empenhe para ter um bom site adaptado para o mobile. Você irá conseguir melhorar em termos de experiência para com o usuário, além de novamente frequentar as primeiras posições da página de resultado de busca do Google. 

Conclusão

Fazendo um breve resumo para concluir esse post. Utilize sempre as ferramentas em conjunto para uma melhor análise. Fique atento para as métricas citadas e sempre que puder tente melhorá-las. Olhe bem para os gráficos waterfall da WebTestPage e veja qual ou quais requisições podem ser otimizadas. Lembre-se dos gráficos que mostram a proporção dos conteúdos carregados por tipo e por domínio, além dos gráficos de proporção das requisições por tipo e por domínio. Ambos podem ser visualizados pela ferramenta WebSite Speed Test da Pingdom. Nunca deixe de conferir como o Google está olhando o seu site, para isso, utilize a ferramenta PageSpeed Insights. Dê sempre uma importância bem grande para o seu desempenho mobile, analisado por essa ferramenta.

Quer saber mais algumas dicas de como otimizar mais seu site? Dê uma olhada nesse link aqui.