O que é GTmetrix e para que ele serve?
GTmetrix é uma ferramenta que permite a você conhecer em detalhes o carregamento do seu site ou blog. Ele indica o tempo de download de cada elemento, o que possibilita fazer otimizações, de modo que o usuário tenha a melhor experiência possível no que diz respeito à velocidade.
A ferramenta é gratuita, o que é impressionante, levando em conta a quantidade e a qualidade das funcionalidades oferecidas. Não dá mais para analisar sem se cadastrar: desde dezembro de 2023 é preciso estar logado em uma conta com e-mail validado para gerar qualquer relatório, mas o cadastro gratuito não pede cartão de crédito.
Acontece que, quando você faz login, a ferramenta permite alterar parâmetros da avaliação, além de oferecer a possibilidade de salvar suas análises e até mesmo exportá-las em PDF. Também é possível analisar dois sites ao mesmo tempo, o que permite fazer uma comparação de desempenhos.
O objetivo de tudo isso é fazer seu site carregar mais rápido. Talvez você pense: “Mas que diferença faz uns 5 segundos? Isso é tão pouco!” Parece pouco, mas para um usuário de internet, alguns segundos são quase uma eternidade.
O Google já indexa a web pela versão móvel: ele rastreia as páginas com o agente para smartphone e usa esse conteúdo para indexar e classificar, o que se chama mobile-first indexing.
Um estudo da Akamai divulgado em abril de 2017 mostrou que dois segundos de atraso no carregamento aumentam a taxa de rejeição em 103%. Além disso, 100 milissegundos (o mesmo que um décimo de segundo) pode reduzir a taxa de conversão em cerca de 7%.
Como se não bastasse o comportamento do usuário, o critério do Google hoje tem nome: os Core Web Vitals. São três métricas (LCP de até 2,5 segundos, INP de até 200 milissegundos e CLS de até 0,1) e o próprio Google confirma que elas são usadas pelos seus sistemas de classificação, ainda que avise que uma boa pontuação sozinha não garante as primeiras posições em uma estratégia de SEO.
Desse modo, se você está investindo em Marketing de Conteúdo, é essencial cuidar da velocidade de carregamento do seu site, e o GTmetrix pode ajudar muito nisso.
Confira também estes outros conteúdos:
Stage: a solução para criação de sites de alta performance no WordPress
Hospedagem cloud: o que é, como funciona e suas vantagens
12 melhores criadores de site do mercado
Quais são principais as funcionalidades do GTmetrix?
O GTmetrix tem muitos recursos. Veja a seguir os principais.
Pontuação de velocidade
Desde 16 de novembro de 2020 o GTmetrix não usa mais as notas do Google PageSpeed nem do Yahoo YSlow. O relatório é gerado pelo Lighthouse e traz três indicadores: o Performance Score (o quanto a página realmente carregou bem, em porcentagem), o Structure Score (o quanto ela segue as boas práticas de performance, também em porcentagem) e a GTmetrix Grade, uma nota de A a F que combina os dois, com peso de 70% para o Performance Score e 30% para o Structure Score.
O resultado é exibido em porcentagem, sendo possível até fazer uma comparação com a média geral dos sites analisados no GTmetrix nos últimos 30 dias. Para isso, basta posicionar o cursor sobre o ícone que fica à direita da pontuação.
Detalhes de carregamento
A quantidade de detalhes apresentados no relatório é incrível. A ferramenta analisa todos os elementos do seu site e apresenta um gráfico em formato de timeline que indica até mesmo o momento do carregamento de cada item.
Recomendações
Uma parte do relatório inclui recomendações do que você pode fazer para otimizar seu site. Elas são organizadas em categorias e, dependendo do nível do seu conhecimento técnico, é possível fazer diversos ajustes para otimizar o tempo de carregamento.
Geração de relatório em PDF
O relatório pode ser exportado em PDF, mas na conta gratuita sai só a versão resumida (Summary). O PDF completo está nos planos pagos. A opção fica em um botão vermelho no lado direito da tela:
Teste a partir de várias localidades
Para fazer o teste de carregamento, é possível realizar a simulação a partir de várias localidades. O GTmetrix tem hoje 113 servidores de teste em 25 locais no mundo, mas a conta gratuita testa apenas a partir de servidores da América do Norte e da Europa. Locais como São Paulo entram só nos planos pagos, que liberam de 5 a 25 localidades conforme o plano.
Geração de vídeo
Essa funcionalidade é bastante interessante. Ela gera um vídeo do carregamento do seu site e adiciona uma legenda no canto, indicando os principais eventos, como você pode ver nesta imagem:
Quais são as limitações do plano gratuito?
O plano Basic gratuito dá 5 testes sob demanda por mês, durante 3 meses, sem pedir cartão de crédito, e guarda os relatórios por 1 semana. Por outro lado, para quem tem uma agência e precisa analisar vários sites, um dos planos pagos será um bom negócio, para não ficar limitado a essa pequena quantidade.
Não existe mais o limite de 20 URLs no dashboard: o que restringe a conta gratuita hoje é a retenção de 1 semana, prazo depois do qual os relatórios são apagados e não podem ser recuperados. Além disso, os planos pagos aumentam o número de URLs monitoradas e liberam a frequência de hora em hora.
O nome Developer Toolkit foi aposentado. Esses recursos viraram as Analysis Options, e a parte avançada ficou nos planos pagos: teste em mais de 55 dispositivos simulados, mais localidades e controle fino da velocidade de conexão. Isso permite, por exemplo, simular o carregamento de sites em inúmeros dispositivos móveis, escolher a resolução do aparelho e salvar presets para análises.
Como testar o seu site com o GTmetrix?
Agora que você já tem uma visão geral do GTmetrix, está na hora de aprender a usá-lo. Confira um passo a passo.
1. Crie uma conta
A conta é obrigatória: sem login com e-mail validado o GTmetrix não gera relatório. O cadastro é gratuito e leva menos de um minuto. Por isso, assim que acessar a página do GTmetrix, caso decida criar uma conta, clique em “SignUp”, no canto superior direito.
Na tela que abrirá, preencha seus dados e clique em “Create an Account”.
2. Faça sua consulta
Depois de fazer login, você será direcionado para o seu dashboard, que terá um caixa de texto onde será digitado o endereço do site a ser analisado. Aqui no exemplo, estamos usando o próprio site do GTmetrix. Depois de digitar essa informação, clique em “Analysis Options” para alterar algumas configurações da consulta.
Ao fazer isso, serão exibidas algumas opções úteis, como você pode ver nesta imagem:
Se seu público-alvo é composto por pessoas que vivem aqui no país, escolha o local do teste em Analysis Options, no dashboard. Atenção: São Paulo está entre as 25 localidades do GTmetrix, mas a conta gratuita só testa a partir de servidores da América do Norte e da Europa, então essa opção exige um plano pago. Na próxima caixa, você pode definir o Chrome ou o Firefox como o navegador a ser usado na simulação.
Também é possível habilitar a opção “Create Video”, que gera um vídeo do carregamento do seu site. Ele permite visualizar a abertura da página e oferece, inclusive, uma legenda que indica o momento dos principais eventos.
Habilitar a opção “Adblock Plus” também é muito interessante. Se você posicionar a opção em “On”, a análise vai desconsiderar os anúncios de terceiros que estão no seu site. Assim, você pode comparar o tempo de carregamento com e sem anúncios para saber o quanto eles estão impactando a abertura da página.
Após fazer essas configurações, clique em “Analyze” para colocar a ferramenta para trabalhar.
3. Analise os resultados
Um resumo da análise aparece no topo da página, como você pode ver nesta imagem:
Nessa tela você vê quais critérios foram usados na consulta, como localidade, navegador e geração de vídeo.
O resumo mostra a GTmetrix Grade (de A a F), o Performance Score e o Structure Score em porcentagem, além dos Web Vitals medidos em laboratório: LCP (Largest Contentful Paint), TBT (Total Blocking Time) e CLS (Cumulative Layout Shift). O tempo para o carregamento completo do site é 2,1 segundos, e o tamanho total do download é 679KB.
Rolando a página, você vê o detalhamento da pesquisa, que é organizada em várias abas:
As abas hoje são Summary, Performance, Structure, Waterfall, Video e History. As antigas abas PageSpeed e YSlow deram lugar à Structure, que reúne as auditorias do Lighthouse, e a antiga Timings virou a Performance.
A próxima aba, “Waterfall”, oferece um gráfico incrível que mostra o momento em que cada elemento do site é carregado:
Note que é possível até refinar a exibição do gráfico, exibindo informações referentes apenas a HTML, CSS, imagens e assim por diante. Ao posicionar o cursor ou clicar sobre esses itens, informações extras são exibidas, o que enriquece ainda mais a análise.
A aba “Timing” dá diversos detalhes sobre cada etapa do carregamento do site:
Ao posicionar o cursor sobre cada retângulo da linha do tempo, as informações relativas ao evento são apresentadas logo abaixo.
Como mostramos no tópico das funcionalidades, a aba “Vídeo” gera um vídeo do carregamento do site. Por fim, a aba “History” mostra o histórico de desempenho, levando em conta análises que você fez anteriormente.
No meu lateral existe a opção “Compare”. Ao clicar sobre ela, surge uma tela com uma caixa de texto que permite digitar o endereço de outro site para fazer uma comparação de desempenho. Assim como ocorreu na pesquisa inicial, aqui também é possível alterar detalhes da análise:
A tela seguinte coloca o desempenho dos dois sites lado a lado, o que facilita muito a comparação:
A velocidade de carregamento é um aspecto de grande importância em um site. Afinal, se os usuários vão embora muito rápido, toda a sua estratégia de marketing acaba sendo prejudicada, já que ela depende de eles permanecerem e realizarem ações, a fim de se tornarem leads e clientes.
Nesse sentido, o GTmetrix é um grande aliado, uma vez que ele consegue fazer uma análise bastante detalhada do seu site ou blog, permitindo que você faça as otimizações necessárias. Em resultado disso, a experiência do usuário será bem melhor.
É claro que você não vai apenas analisar seu site, já que depois é preciso fazer ajustes. Por isso, confira o artigo “11 principais passos para melhorar a velocidade de carregamento das suas páginas”.
