Conheça Mais Sobre A Ferramenta De Teste De Velocidade GTmetrix

Como dono de um site você dispõe de muitas opções quando se trata de executar testes de velocidade para verificar o desempenho. Anteriormente, analisamos mais profundamente a ferramenta Pingdom. Hoje queremos mergulhar em como melhor usar e entender os dados da popular ferramenta de teste de velocidade do site GTmetrix. Ferramentas como essa dependem de sistemas de classificação e pontuação, além de avisos sobre o que pode estar errado em seu site. Às vezes, isso pode ser confuso e portanto, levar algum tempo para interpretar o que eles realmente significam pode ajudá-lo a não apenas aumentar sua pontuação, mas também o desempenho do seu site, que é o que realmente importa.

GTmetrix foi desenvolvido pela GT.net, uma empresa sediada no Canadá, como uma ferramenta para seus clientes de hospedagem para determinar facilmente o desempenho de seu site. Além do Pingdom, é provavelmente uma das ferramentas de teste de velocidade mais conhecidas e usadas na web hoje! Na verdade, a razão pela qual estamos escrevendo isso é que temos muitos clientes da Kinsta que sempre nos perguntam como seguir os conselhos que eles vêem em seus relatórios do GTmetrix. Comparado com outras ferramentas para desenvolvedores, o GTmetrix é muito fácil de usar e o iniciante pode pegar o jeito rapidamente. Ele usa uma combinação de Google PageSpeed Insights e YSlow para gerar notas e recomendações.

Ferramenta de teste de velocidade GTmetrix

Opções de análise GTmetrix

A versão básica do GTmetrix é totalmente gratuita e você pode ter acesso a várias opções simplesmente inscrevendo-se em uma conta. Eles também têm planos premium, mas, no post de hoje, usaremos a versão gratuita. Se você tiver uma conta, você pode usar especificar um número de opções de análise adicionais.

A primeira é a capacidade de escolher o local em que você deseja testar seu URL. A localização física que você escolhe é realmente muito importante no que se refere a onde seu site está realmente hospedado. Quanto menos latência, mais rápido o tempo de carregamento. Os locais disponíveis atualmente incluem:

Dallas, USA
Hong Kong, China
Londres, UK
Mumbai, Índia
Sydney, Austrália
São Paulo, Brasil
Vancouver, Canadá

Você pode escolher qual navegador você deseja usar. Você pode testar com o Chrome (Desktop) e o Firefox (Desktop). Versões móveis estão disponíveis em seus planos premium. Eles também permitem que você altere a velocidade de conexão, o que significa que você pode simular vários tipos de conexão para ver como eles afetam as cargas de sua página.

Opções adicionais incluem a capacidade de criar um vídeo. Isso pode ajudá-lo a depurar problemas, como você pode ver como a página é processada. O AdBlock Plus é um ótimo recurso. Se você estiver executando uma rede de anúncios de terceiros, como o Google Adsense, poderá ativar essa opção para ver o impacto total dos anúncios nos tempos de carregamento.

Opções adicionais incluem parar o onload de teste (no qual vamos nos aprofundar mais tarde), poder enviar um cookie junto com sua solicitação, usar a autenticação HTTP a capacidade de incluir URLs na lista de permissões e na lista negra, resolução de tela e relação de pixels do dispositivo, e substituição do agente do usuário.

Análise com a ferramenta de teste de velocidade GTmetrix

Uma página da web é composta de diferentes recursos, como HTML, JavaScript, CSS e imagens. Cada um deles gera solicitações para processar o que você vê em seu website. Normalmente, quanto mais pedidos você tiver, mais lento seu site será carregado. Isso nem sempre é o caso, mas é verdade na maioria das vezes.

Abaixo, vamos dividir cada seção do GTmetrix e explicar com mais detalhes o que a informação significa no que se refere ao desempenho geral do seu site e o que fazer com as recomendações. Lembre-se de não ficar obcecado demais com as pontuações, mas sim de melhorar a velocidade real do seu site.

Resumo do GTmetrix
Desempenho
Estrutura
Gráfico da cascata
Vídeo
História

Resumo do GTmetrix (pontuações de desempenho e detalhes)

Quando você executa seu site WordPress através do GTmetrix, ele gera um relatório de desempenho que inclui seu “GTmetrix Grade” e “Web Vitals”.

O GTmetrix Grade é calculado a partir de duas métricas – Desempenho e Estrutura.

GTmetrix Performance é a pontuação de desempenho da ferramenta de auditoria do site Lighthouse
GTmetrix Structure é uma métrica de desempenho proprietária que mede o desempenho geral de uma página.

Em 2020, o Google introduziu um conjunto padronizado de métricas de desempenho e experiência do usuário na web chamado Web Vitals. Web Vitals consiste em uma variedade de métricas, mas as que a GTmetrix leva em conta são Largest Contentful Paint (LCP), Total Blocking Time (TBT) e Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP) é a quantidade de tempo que leva para a maior parte de sua página ser carregada. Para alguns sites, o LCP pode ser uma grande imagem herói, enquanto em outros sites, o LCP pode se referir ao corpo do texto.
Total Blocking Time (TBT) é a quantidade de tempo que uma página é bloqueada antes que um usuário possa interagir com ela. O CSS e o JS podem ter um enorme impacto sobre o TBT.
O Cumulative Layout Shift (CLS) refere-se ao deslocamento de elementos enquanto uma página está carregando. Por exemplo, o layout de uma página contendo tweets embutidos pode mudar drasticamente à medida que a página carrega.

Em nosso exemplo, estamos utilizando nosso domínio de estudo de caso kinstalife.com, que está hospedado na Kinsta. Em nosso primeiro teste de velocidade, nosso site registrou as seguintes estatísticas.

Grau GTmetrix – B
Desempenho GTmetrix – 85%
Estrutura GTmetrix – 83%
LCP – 1.0s
TBT – 0ms
CLS – 0

Teste de velocidade GTmetrix para kinstalife.com.

Depois fizemos um teste adicional e agora nosso grau GTmetrix é “A”! O que é isso tudo? Você pode notar isso também se você estiver rodando seu website através da ferramenta de teste de velocidade GTmetrix várias vezes. Uma das razões pelas quais isto acontece é por causa do cache, tanto o cache DNS quanto o cache de servidores. Descubra por que mais abaixo em nossa análise da cascata.

Nosso segundo teste de velocidade com GTmetrix.

A página de resumo GTmetrix também contém uma visualização de velocidade, que mostra uma linha do tempo dos principais eventos durante o carregamento de uma página. Na captura de tela abaixo, você pode ver TTFB, FCP, LCP, tempo de carga, tempo de interatividade, e tempo de carga total para kinstalife.com.

Na parte inferior da página de resumo, há também as seções "Questões Principais" e "Detalhes da Página". Em "Top Issues", você pode ver uma lista de itens de alta prioridade a serem corrigidos, enquanto "Page Details" (Detalhes da Página) fornece porcentagens e tamanho de arquivo de quebra de sua página. — Na parte inferior da página de resumo, há também as seções “Questões Principais” e “Detalhes da Página”. Em “Top Issues”, você pode ver uma lista de itens de alta prioridade a serem corrigidos, enquanto “Page Details” (Detalhes da Página) fornece porcentagens e tamanho de arquivo de quebra de sua página.

GTmetrix assuntos principais e detalhes da página.

Desempenho

A seguir é a aba “Performance” da GTmetrix, que mostra uma série de métricas úteis obtidas dos dados de desempenho do Lighthouse. Além do LCP, TBT e CLS mostrados na página de resumo, a seção “Métricas de Desempenho” também mostra Speed Index (SI), Time to Interactive (TTI), e First Contentful Paint (FCP).

GTmetrix Lighthouse Performance Metrics.

Embora a seção “Métricas de desempenho” não mostre exatamente o que você precisa corrigir, ela dá uma boa visão geral sobre quais métricas chave de experiência do usuário você pode melhorar.

Mais abaixo na página, GTmetrix também mostra algumas estatísticas mais tradicionais de “Browser Timing”, incluindo Onload Time, Time to First Byte, Fully Loaded Time, e muito mais. No passado, estas métricas tradicionais eram muito importantes. No entanto, com o Google pavimentando o caminho com métricas padronizadas com Sinais Vitais da Web, recomendamos a otimização para estes. Na maioria dos casos, você verá que a otimização para Web Vitals também resultará em boas métricas de tempo do navegador.

Métricas de tempo do navegador GTmetrix.

Estrutura

A aba “Estrutura” do GTmetrix é onde você pode visualizar questões específicas que afetam o desempenho do seu site. Esta página é muito útil porque fornece informações acionáveis como “eliminar recursos de render-blocking” e “minify CSS” para começar a otimizar seu site.

Tentaremos cobrir os mais comuns e populares com os quais vemos os proprietários de sites WordPress lutando. Certifique-se também de marcar este post nos favoritos, pois estaremos constantemente atualizando-o. Geralmente, se você os melhorar em seu site, você deverá ver um aumento no desempenho.

Tenha imagens redimensionadas

Quando se trata de trabalhar com imagens em seu site, você deve sempre tentar carregá-las em escala e não permitir que o CSS as redimensione. Se você não fizer isso, receberá a recomendação de imagens dimensionadas do serviço. Se você estiver usando o WordPress, por padrão, ele redimensionará suas imagens ao carregá-las na biblioteca de mídia. Essas configurações podem ser encontradas em “Configurações > Mídia”. Você deve garantir que a largura máxima esteja próxima da largura do seu site. Desta forma, o CSS não está tentando redimensionar sua imagem para caber dentro dela. Você também pode redimensioná-los automaticamente com um plugin de otimização de imagem.

Pequeno Inline CSS

Realizar o inlining no seu CSS geralmente não é recomendado, pois aumentará o tamanho geral do download de sua solicitação de página. No entanto, se seu site for pequeno, com solicitações mínimas, ele poderá melhorar seu desempenho.

Para facilmente inserir seu CSS, você pode usar um plug-in gratuito como o Autoptimize. Basta marcar a opção “Inline all CSS?” E, em seguida, garantir que você excluiu os arquivos CSS adicionais que não estão incorporados.

Pequeno Inline JavaScript

Assim como inlining CSS pequeno, o mesmo se aplica para inlining JavaScript pequeno. Geralmente, isso não é recomendado, pois aumentará o tamanho geral do download de sua solicitação de página. No entanto, se seu site for pequeno, com solicitações mínimas, ele poderá melhorar seu desempenho. Novamente, você pode usar as configurações JavaScript do Autoptimize.

Aproveite o cache do navegador

Aproveitar o cache do navegador é uma recomendação muito comum que as pessoas batem o pé. Isso é gerado devido a não ter os cabeçalhos de cache HTTP corretos em seu servidor da web. Veja nossa postagem detalhada sobre como corrigir o aviso do Aproveite de cache do navegador. Você só pode corrigir isso nos recursos que você controla. Por exemplo, se você está vendo isso no redes de publicidade de terceiros, não há nada que você possa fazer.

Servir recursos de um URL consistente

Se você está vendo os recursos de veiculação de um URL consistente é mais provável que você tenha recursos idênticos sendo veiculados a partir do mesmo URL. Muitas vezes isso pode acontecer quando há strings de consulta envolvidas. Confira como remover query strings de recursos estáticos. Depois que eles forem eliminados, não precisará mais carregá-lo duas vezes.

Adiar a análise de JavaScript

JavaScript e CSS são por padrão, bloqueio de renderização. Isso significa que eles podem impedir que a página da Web seja exibida até que sejam baixados e processados pelo navegador. O atributo defer diz ao navegador para adiar o download do recurso até que a análise HTML seja concluída. Algumas maneiras fáceis de corrigir isso é utilizar os plugins gratuitos Autoptimize ou Async JavaScript. Certifique-se de verificar o nosso post sobre como eliminar JavaScript e CSS de bloqueio de renderização.

Para uma explicação detalhada, leia: Como adiar a análise do aviso de Javascript no WordPress (4 métodos).

Minimize o CSS e o JavaScript

A minimização é essencialmente remover todos os caracteres desnecessários do código-fonte sem alterar sua funcionalidade. Isso pode incluir quebras de linha, espaços vazios, recuos, etc. Com isso, é possível salvar bytes de dados e acelerar o tempo de download, de análise e de execução.

Novamente, o plugin gratuito Autoptimize é ótimo para isso. Simplesmente garanta que o “Optimize JavaScript Code” e o “Optimize CSS Code” sejam verificados. Se você tiver um site grande, convém jogar com as configurações avançadas abaixo, pois algumas delas podem prejudicar o desempenho do site. Inlining ou combinação de CSS e JavaScript em sites grandes geralmente não é recomendado. É aqui que o poder do HTTP/2 entra em ação.

Autoptimize minimiza o CSS e o JavaScript

Se você é um cliente Kinsta, você pode tirar proveito do recurso de minificação de código que está embutido no painel de controle MyKinsta. Isto permite aos clientes ativar de forma rápida e fácil a minificação automática de CSS e JavaScript com um simples clique, acelerando seus sites com zero esforço de trabalho manual.

Otimize Imagens

De acordo com o arquivo HTTP, desde de abril de 2017, as imagens perfazem, em média, 66% do peso total de uma página da Web. Então, quando se trata de otimizar seu site WordPress, as imagens são de longe o primeiro lugar que você deve começar! É mais importante que scripts e fontes.

Em um mundo perfeito, todas as imagens devem ser compactadas e otimizadas antes de serem enviadas para o WordPress. Mas infelizmente isso não é realista. Por isso, recomendamos o uso de um bom plugin de otimização de imagem. Isso ajudará a compactar automaticamente suas imagens, redimensioná-las e garantir o carregamento leve e rápido no seu site. Confira nossa postagem detalhada sobre como otimizar imagens para web.

Reduzir o tempo de resposta inicial do servidor

Para o WordPress, o principal culpado pelos lentos tempos iniciais de resposta do servidor é a falta de cache de página. Sem o cache de páginas, o WordPress usa o PHP para construir dinamicamente páginas para cada solicitação individual, o que significa que ele pode ficar sobrecarregado com solicitações rapidamente. Com o cache de páginas habilitado, seu site pode servir arquivos HTML pré-gerados, o que é muito mais rápido e escalável do que usar PHP para atender a cada solicitação de página.

Reduza o tempo de resposta inicial do servidor.

Se você estiver hospedado na Kinsta, não precisa se preocupar com o cache de páginas porque nós cuidamos disso para você com nossa configuração Nginx. Se o seu host WordPress não suporta o cache de páginas, você pode instalar um plugin de cache como WP Rocket ou W3 Total Cache. Para reduzir ainda mais o tempo de resposta do servidor, recomendamos integrar o Cloudflare APO ao seu site WordPress. Este serviço inovador de otimização do Cloudflare distribui as páginas HTML do seu site pelo mundo, o que pode reduzir o tempo de resposta do servidor globalmente.

Minimizar HTML

Assim como o CSS e o JavaScript, o HTML também pode ser reduzido para remover caracteres desnecessários e economizar bytes de dados para acelerar o tempo de execução.

O plugin gratuito Autoptimize é bom para isso também. Basta ativar a opção “Otimizar código HTML”.

Ativar compressão GZIP

GZIP é um formato de arquivo e um aplicativo de software usado para compactação e descompactação de arquivos. A compressão GZIP é ativada no lado do servidor e permite uma redução ainda maior no tamanho de seus arquivos HTML, folhas de estilo e JavaScript. Não funcionará em imagens, pois elas já estão compactadas de maneira diferente. Alguns viram reduções de até 70% devido à compressão. É provavelmente uma das otimizações mais fáceis que você pode fazer quando se trata do WordPress. Nota: A compressão GZIP é ativada por padrão em todos os servidores Kinsta.

Para habilitar a compressão GZIP no Apache, basta adicionar o seguinte código ao seu arquivo .htaccess.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Se você está rodando no NGINX, basta adicionar o seguinte ao seu arquivo nginx.conf.

gzip on;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Certifique-se também de verificar o nosso post de como ativar compressão GZIP.

Minimizar redirecionamentos

Minimizar redirecionamentos HTTP de um URL para outro reduz os RTTs adicionais e o tempo de espera dos usuários. Confira nossa postagem sobre redirecionamentos WordPress em que descobrimos que dois redirecionamentos ruins aumentaram os tempos de carregamento do site em 58%! Simples, o WordPress redireciona a lentidão do seu site. É por isso que vale a pena dedicar tempo para minimizar o número de redirecionamentos de visitantes na sua experiência no site.

Especifique um validador de cache

A recomendação de especificar um validador de cache aparece quando há cabeçalhos de armazenamento em cache HTTP ausentes. Eles devem ser incluídos em todas as respostas do servidor de origem, pois ambos validam e definem o tamanho do cache. Se os cabeçalhos não forem encontrados, ele gerará uma nova solicitação para o recurso toda vez, o que aumentará a carga no seu servidor. A utilização de cabeçalhos de armazenamento em cache garante que as solicitações subsequentes não precisem ser carregadas do servidor, economizando largura de banda e melhorando o desempenho do usuário. E lembre-se de que você não pode corrigir isso em recursos de terceiros que você não controla.

Há vários cabeçalhos de cache HTTP diferentes envolvidos que podem ser usados para corrigir essa recomendação. Confira nossa postagem detalhada sobre como especificar um validador de cache.

Especifique as dimensões da imagem

Assim como você não deve deixar o CSS redimensionar suas imagens, você também deve especificar as dimensões da imagem. Isso significa incluir a largura e a altura do seu código HTML.

Incorreta

<img src="https://domain.com/images/image1.png">

Correta

<img src="https://domain.com/images/image1.png" width="200" height="100">

GTmetrix especifica as dimensões das imagens

Remover query strings de recursos estáticos

Seus arquivos CSS e JavaScript geralmente têm a versão do arquivo no final de seus URLs, como domain.com/style.css?ver=4.6. Alguns servidores e servidores proxy não conseguem armazenar em cache as cadeias de consulta, mesmo que um cabeçalho de controle de cache-control:public esteja presente. Então, removendo, você pode melhorar seu caching. Isso pode ser feito facilmente com código ou plugins gratuitos do WordPress.

Confira nosso post detalhado sobre como remover query strings de recursos estáticos. E lembre-se de que você não pode corrigir isso em recursos de terceiros que você não controla.

Specify a vary: accept-encoding header

Este é um cabeçalho HTTP e deve ser incluído em todas as respostas do servidor de origem, pois informa ao navegador se o cliente pode ou não manipular versões compactadas do conteúdo. Normalmente, quando a compressão GZIP está ativada, isso também é corrigido. Mas certifique-se de verificar o nosso post em profundidade sobre como corrigir a recomendação specify a vary: Cabeçalho Accept-Encoding. E, novamente, você não pode corrigir isso em recursos de terceiros.

Especifique uma variação: cabeçalho de codificação de aceitação

Gráfico em cascata GTmetrix

O gráfico em cascata do GTmetrix exibe todas as solicitações individuais em sua página da Web (conforme mostrado abaixo). Você pode analisar cada solicitação para ver o que está causando atrasos e problemas de desempenho em seu site. Abaixo está um resumo mais detalhado e/ou definição do que cada uma das cores significa em cada solicitação.

Bloqueio (Marrom)

Quando um navegador carrega uma página da Web, os recursos JavaScript e CSS geralmente impedem que a página da Web seja exibida até que sejam baixados e processados pelo navegador. Esse atraso de tempo aparece como bloqueio no gráfico em cascata GTmetrix. Confira nosso post detalhado sobre como eliminar JavaScript e CSS de bloqueio de renderização para mais informações.

Pesquisa de DNS (Azul)

Você pode pensar em pesquisa de DNS como um catálogo telefônico. Existem servidores chamados Domain Name Servers (Servidores de Nomes de Domínio) que contêm as informações sobre o seu site e para qual IP eles devem ser roteados. Quando você executa seu site pela primeira vez através do GTmetrix, ele executa uma nova pesquisa e precisa consultar os registros DNS para obter as informações de IP. Isso resulta em algum tempo de pesquisa adicional.

Quando você executa seu site pelo GTmetrix uma segunda vez, ele armazena em cache o DNS porque ele já conhece as informações de IP e não precisa realizar a pesquisa novamente. Esta é uma das razões pelas quais você pode ter um bom visual, pois o seu site aparece mais rápido depois de executar o GTmetrix várias vezes. Como você pode ver na tela abaixo, no segundo teste que executamos, o tempo de pesquisa de DNS na carga inicial do DOC é de 0 ms. Esta é uma área que muitas pessoas interpretam erroneamente! Recomendamos executar o teste várias vezes e obter a média, a menos que você queira DNS como parte de seu relatório. Nesse caso, você pode fazer o primeiro teste.

O mesmo se aplica aos seus ativos (JavaScript, CSS, imagens) se você estiver usando uma CDN. Um cache de CDN funciona como o DNS, uma vez que é armazenado em cache é muito mais rápido em cargas consecutivas. Outra dica sobre como acelerar o DNS é usar a pré-busca de DNS. Isso permite que o navegador realize pesquisas de DNS em uma página em segundo plano. Você pode fazer isso adicionando algumas linhas de código ao cabeçalho do seu site WordPress. Veja alguns exemplos abaixo.

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Ou se você estiver executando o WordPress versão 4.6 ou mais recente, você pode querer usar dicas de pesquisa. Os desenvolvedores podem usar o filtro wp_resource_hints para adicionar domínios e dns-prefetch, preconnect, prefetch ou prerender.

Conectando (verde)

O tempo de conexão no GTmetrix está se referindo à conexão TCP ou ao tempo total necessário para criar uma conexão TCP. Você realmente não precisa entender como isso funciona, mas isso é simplesmente um método de comunicação entre o host / cliente e o servidor que deve ocorrer.

Enviando (vermelho)

O tempo de envio é simplesmente o tempo que o navegador da Web leva para enviar dados ao servidor.

Esperando (Roxo)

O tempo de espera no GTmetrix está na verdade se referindo ao tempo até o primeiro byte, também conhecido como TTFB em algumas ferramentas. O TTFB é uma medida usada como uma indicação da capacidade de resposta de um servidor da Web ou outro recurso de rede. Geralmente, qualquer coisa abaixo de 100 ms é aceitável e um bom TTFB. Se você está se aproximando do intervalo de 300-400 ms, você pode ter algo configurado incorretamente em seu servidor ou talvez seja hora de atualizar para uma pilha da web melhor. Como você pode ver no nosso teste abaixo, foi aproximadamente 100 ms, o que é ótimo.

Algumas maneiras fáceis de diminuir o seu TTFB é garantir que o seu host tenha o armazenamento em cache adequado e utilizando um CDN. Confira nosso post detalhado sobre todas as formas de redugir o TTFB no seu site WordPress.

Recebendo (Cinza)

O tempo de recebimento é simplesmente o tempo que leva para o navegador da Web receber dados do servidor.

Tempo de evento

Cada vez que você solicita uma página, ela tem um ‘’tempo de evento’’ no qual as coisas são processadas e carregadas.

Primeira tinta (linha verde): o primeiro ponto em que o navegador faz qualquer tipo de renderização na página, como exibir a cor do plano de fundo.
DOM Loaded (Linha Azul): O ponto em que o DOM (Document Object Model) está pronto.
Onload (Linha Vermelha): Quando o processamento da página estiver concluído e todos os recursos da página (imagens, CSS, etc.) tiverem terminado o download.
Totalmente carregado (linha roxa): o ponto após o evento Onload ser disparado e não houver atividade de rede por 2 segundos.

Cabeçalhos de Resposta HTTP

Você também pode clicar em uma solicitação individual para ver o que eles chamam de cabeçalhos de resposta HTTP. Isso fornece informações valiosas. Na tela abaixo podemos ver instantaneamente coisas como o gzip ativado no servidor da web, ele está sendo executado em HHVM, está sendo servido a partir do cache (HIT, mostraria MISS de outra forma), os cabeçalhos de controle de cache, arquitetura do servidor (isso nem sempre é visível), cabeçalhos expires, o user-agent do navegador e muito mais.

Outra coisa a se levar em conta é que a ferramenta GTmetrix suporta HTTP/2, ao contrário do Pingdom, porque atualmente está usando o Chrome 58+ para executar seus testes. O Chrome adicionou o suporte HTTP/2 na versão 49. Então tenha em mente quando você está escolhendo qual ferramenta de teste de velocidade usar.

Vídeo

Para ajudar você a depurar falhas visuais e problemas de desempenho no frontend, a última versão do GTmetrix inclui uma aba “Vídeo”. Com o recurso de vídeo habilitado, o GTmetrix gravará automaticamente um vídeo embutido mostrando como uma página carrega para cada teste de desempenho. Este recurso é muito útil para a depuração de problemas visuais que só aparecem em certas combinações de browser e tamanho de tela.

Historia

Na aba ‘’histórico’’, você pode ver todos os seus testes de velocidade anteriores. Há um limite para quantos são armazenados em contas gratuitas. Você também pode monitorar uma URL que permite acompanhar o desempenho ao longo do tempo e ver quaisquer alterações quando elas ocorrerem.

Um recurso muito legal é que você pode selecionar seus relatórios anteriores e compará-los lado a lado. Isso pode ser muito útil, especialmente quando você está fazendo otimizações no seu site para ver se há melhorias. Lembre-se, às vezes você pode otimizar demais também.

Configuração de domínio do estudo de caso

Se você chegou até aqui no nosso mergulho sobre o GTmetrix, então você terá uma surpresa. É comum ver pessoas compartilharem dicas e estudos de caso, mas não compartilharem como chegaram lá. Então, abaixo está nossa configuração exata para o domínio do estudo de caso usado acima! Sinta-se à vontade para reproduzir!

Arquitetura

O domínio do estudo de caso (perfmatters.io) é hospedado com o Kinsta no Google Cloud Platform nos EUA (localização central). O Kinsta usa HTTP/2, NGINX, MariaDB, que contribuem para os tempos de carregamento rápidos.
O site está usando o HHVM. 7.3 está agora disponível no Kinsta, que é ainda mais rápido que o HHVM! Você pode mudar para as versões do PHP com o pressionar um botão.
O site não está usando nenhum plug-in de armazenamento em cache. Kinsta armazena tudo em cache no nível do servidor, o que simplifica muito as coisas e, na maioria dos casos, é mais rápido!

Plugins WordPress

E aqui está uma lista dos plugins que estão sendo usados no site WordPress.

O plugin gratuito CDN Enabler é usado para implantar o KeyCDN.
O plugin gratuito CAOS é usado para sincronizar o Google Analytics localmente.
O plugin premium perfmatters é usado para se livrar de solicitações HTTP desnecessárias e desativar itens como emojis e incorporações.
O plugin premium Gonzalez é usado para desativar certos scripts do carregamento.
O plugin premium Imagify é usado para comprimir imagens.

Tutoriais Recomendados para leitura adicional:

Resumo

Como você pode ver, saber como a ferramenta de teste de velocidade GTmetrix funciona um pouco melhor e o que todos os gráficos significam pode ajudar você a tomar uma decisão mais orientada a dados quando se trata de desempenho. Uma análise em cascata, como chamamos, é crucial para saber como seus ativos individuais são carregados. E lembre-se, quando se trata de compará-lo com o Pingdom, eles são ferramentas diferentes e, portanto, é melhor ficar com um ou outro como eles calculam as coisas de forma diferente. Tem outras ótimas dicas do GTmetrix?

Se você gostaria de ver mais artigos aprofundados como o acima, por favor deixe-nos saber abaixo nos comentários!

Brian Jackson

Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.