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.

Saber como funciona o @GTmetrix é uma informação inestimável para os donos de sites do WordPress! ⏱ Click to Tweet

GTmetrix

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

Ferramenta de teste de velocidade 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 de formato de teste do GTmetrix

Opções de formato de teste do GTmetrix

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. Aqui temos um ótimo relatório de comparação no site da Smashing Magazine. Não é surpresa que aquele com anúncios tenha sido 2,3 segundos mais lento.

Opções extras do GTmetrix

Opções extras do GTmetrix

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 e a capacidade de incluir URLs na lista de permissões e na lista negra.

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 (pontuações de desempenho e detalhes)

Quando você executa o seu site WordPress através do GTmetrix, ele gera um relatório de desempenho que inclui sua pontuação PageSpeed, YSlow Score, tempo totalmente carregado, tamanho total da página e o número de solicitações que você tem em seu site. Em nosso exemplo, estamos usando nosso domínio de estudo de caso perfmatters.io, que está hospedado na Kinsta. Em nosso primeiro teste de velocidade, nosso tempo total foi de 1,1 segundo.

Relatório de desempenho do GTmetrix

Relatório de desempenho do GTmetrix

Em seguida, fizemos um teste adicional e agora nosso tempo de carregamento total é de 485 ms! O que é isso tudo? Você pode notar isso também se estiver executando o seu site através da ferramenta de teste de velocidade GTmetrix várias vezes. Uma das razões pelas quais isso acontece é devido ao armazenamento em cache, tanto o armazenamento em cache do DNS quanto o do servidor. Descubra por que mais abaixo em nossa análise de cascata.

Tempo de carregamento total do GTmetrix

Tempo de carregamento total do GTmetrix

Outra questão que surge com bastante frequência é: por que a ferramenta GTmetrix está sempre mostrando velocidades mais lentas que a Pingdom? Por exemplo, nós rodamos o mesmo site através de um teste Pingdom e mostrou que é bem mais rápido.

Compare Pingdom to GTmetrix

Compare Pingdom to GTmetrix

Tendo executado milhares de testes de velocidade, podemos dizer-lhe que o Pingdom irá quase sempre mostrar velocidades mais rápidas do que o GTmetrix. Nenhum deles está errado. Eles apenas calculam as velocidades de maneiras diferentes e, portanto, você não deve comparar os dois. Quando se trata de usar ferramentas de teste de velocidade para sites, você deve realmente escolher um que você gosta e ficar com ele. Isso fornecerá uma boa métrica básica para comparação com testes adicionais. Além disso, a partir de 8 de fevereiro de 2017, o GTmetrix agora usa o que chamam de tempo totalmente carregado.

De acordo com o GTmetrix, o tempo total carregado é o ponto após o evento onload O evento onload é disparado e não há atividade de rede por 2 segundos. Para simplificar, eles agora aguardam até que sua página pare de transferir dados antes de concluir um teste, resultando em tempos de carregamento de página mais consistentes. Anteriormente, eles usavam o tempo do Onload, o que, em alguns casos, resultava em coisas que não apareciam nos relatórios de desempenho, como anúncios carregados de forma assíncrona ou capturas de tela ausentes.

PageSpeed

O GTmetrix usa regras do Google PageSpeed Insight As regras do Google PageSpeed Insight dão ao seu site uma pontuação. As classificações são de 0 a 100 (de F a A). Existem mais de 25 recomendações. Vamos tentar cobrir os mais comuns e populares que vemos os proprietários de sites WordPress lutando. Certifique-se também de marcar esta postagem como iremos atualizá-la constantemente. Geralmente, se você melhorar isso no seu site, deverá ver uma diminuição nos tempos de carregamento geral.

Pontuações do GTmetrix PageSpeed

Pontuações do GTmetrix PageSpeed

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.

Imagens redimensionadas

Imagens redimensionadas

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.

Pequeno Inline CSS

Pequeno Inline CSS

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.

Autoptimize inline CSS

Autoptimize inline CSS

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. Mais uma vez, você pode usar um plugin gratuito como Autoptimize.

Pequeno Inline JavaScript

Pequeno Inline JavaScript

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.

Aproveite o cache do navegador

Aproveite o cache do navegador

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.

Servir recursos de um URL consistente

Servir recursos de um URL consistente

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.

Adiar a análise de JavaScript

Adiar a análise de JavaScript

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.

Minimize o CSS e o JavaScript

Minimize o CSS e o JavaScript

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

Autoptimize minimiza o CSS e o JavaScript

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.

Otimize imagens

Otimize imagens

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.

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.

Minimizar HTML

Minimizar HTML

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

Autoptimize otimize código HTML

Autoptimize otimize 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.

Ativar compressão GZIP

Ativar compressão GZIP

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


# 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

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.

Minimizar redirecionamentos

Minimizar redirecionamentos

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. Nota: Os cabeçalhos de armazenamento em cache HTTP são automaticamente incluídos em todos os servidores Kinsta.

Especifique um validador de cache

Especifique um validador de cache

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

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.

Remover query strings de recursos estáticos

Remover query strings de recursos estáticos

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.

Specify a vary: accept-encoding header

Specify a vary: accept-encoding header

YSlow

O GTmetrix também usou o YSlow para dar uma pontuação ao seu site. Existem mais de 15 recomendações. Vamos tentar cobrir os mais comuns e populares que vemos os proprietários de sites WordPress tendo dificuldade. Alguns deles já foram abordados nas recomendações do PageSpeed acima. Certifique-se também de marcar esta postagem como iremos atualizá-la constantemente. Geralmente, se você melhorar isso no seu site, deverá ver uma diminuição nos tempos de carregamento geral.

Pontuações GTmetrix YSlow

Pontuações GTmetrix YSlow

Faça menos solicitações HTTP

Isso é do senso comum, mas tudo que é carregado no seu site, plugins, imagens, fontes, etc., gera uma solicitação HTTP. Esse é um dos motivos pelos quais você não deseja instalar 100 plug-ins de uma só vez, pois provavelmente eles chamariam scripts CSS e JavaScript, o que por sua vez, geraria centenas de solicitações HTTP. Quanto menos, melhor.

 

Faça menos solicitações HTTP

Faça menos solicitações HTTP

Adicionar Cabeçalhos Expires

De acordo com este artigo do Google Developers, o cabeçalho HTTP Caching: Cache-Control foi definido como parte da especificação HTTP/ 1.1 e substitui os cabeçalhos anteriores (neste caso, o cabeçalho Expires) usados para definir políticas de cache de resposta. Todos os navegadores modernos suportam Cache-Control, por isso é tudo o que você precisa. No entanto, não prejudicará nada se você tiver os dois, mas lembre-se de que apenas um será usado. O cabeçalho Expires usa uma data real, enquanto o cabeçalho Cache-Control permite especificar um período de tempo antes da expiração. Lembre-se que você não tem controle sobre isso em recursos de terceiros. Nota: Os cabeçalhos de expiração são automaticamente incluídos em todos os servidores Kinsta.

Adicionar Cabeçalhos Expires

Adicionar Cabeçalhos Expires

Para adicionar o cabeçalho Expires no Apache, basta adicionar o seguinte código no seu arquivo .htaccess.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"

## EXPIRES HEADER CACHING ##

Para adicionar cabeçalhos Expires no NGINX, basta adicionar o seguinte código ao seu arquivo de configuração.

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}

Use uma rede de entrega de conteúdo (CDN)

Isso é bastante autoexplicativo. Sempre recomendamos usar um CDN, especialmente se você tiver visitantes de todo o mundo. Um CDN mantém uma cópia em cache do seu conteúdo em POPs localizados mais perto do visitante, o que, por sua vez, acelera o tempo de carregamento para eles, reduzindo atrasos. Cloudflare e KeyCDN são ambos provedores de CDN altamente recomendados que você pode facilmente usar com o seu site WordPress.

Use uma rede de entrega de conteúdo

Use uma rede de entrega de conteúdo

Use domínios sem cookies

Geralmente, quando você está veiculando conteúdo como imagens, JavaScript, CSS, não há razão para um cookie HTTP para acompanhá-lo, pois cria sobrecarga adicional. Depois que o servidor define um cookie para um domínio específico, todas as solicitações HTTP subsequentes para esse domínio devem incluir o cookie. Esse aviso é normalmente visto em sites com uma grande quantidade de solicitações. Algumas maneiras de corrigir isso incluem o uso de um provedor de CDN que retira cookies ou configura um domínio e / ou subdomínio separados para fornecer cookies. Confira nossa postagem detalhada sobre como definir a recomendação de uso de domínios sem cookies.

Use domínios sem cookies

Use domínios sem cookies

Reduzir pesquisas de DNS

Cada domínio que você consulta gera busca DNS da primeira vez até que seja armazenado em cache. Por exemplo, digamos que você carregue 10 recursos de seu CDN, 2 de fontes da web do Google e 5 de um único anunciante de terceiros. Isso resultaria em 3 buscas DNS pois cada um desses grupos está consultando um único domínio. Pesquisas de DNS podem rapidamente ficar fora de controle quando você começar a adicionar serviços externos. Uma maneira de ajudar a reduzir isso é hospedar fontes do Google em seu próprio CDN, que, por sua vez, elimina as pesquisas de DNS no Google.

Reduzir pesquisas de DNS

Reduzir pesquisas de DNS

Faça o Favicon Pequeno e Cacheable

Um favicon, ou favicon.ico, é um pequeno ícone de imagem associado ao seu website e exibido na barra de endereço do seu navegador (ou quando você o define como favorito). Mesmo que os favicons sejam muito pequenos, você deve sempre otimizá-los. Todo pouquinho ajuda. KeyCDN tem um ótimo tutorial sobre como fazer seu favicon pequeno e cacheable.

Faça o Favicon Pequeno e Cacheable

Faça o Favicon Pequeno e Cacheable

Configurar Entity Tags (ETags)

O cabeçalho ETag é muito semelhante ao cabeçalho da última modificação. Também é usado para validar o cache de um arquivo. Se você estiver executando o Apache 2.4 ou superior, o cabeçalho ETag já será adicionado automaticamente usando o diretivo FileEag. E no que diz respeito ao NGINX, desde 2016 o cabeçalho ETag é ativado por padrão. Se você está vendo este aviso, recomendamos entrar em contato com seu provedor de hospedagem.

Configure entity tags (ETags)

Configure entity tags (ETags)

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.

Gráfico em cascata GTmetrix

Gráfico em cascata GTmetrix

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.

Bloqueio

Bloqueio

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.

 

O primer DNS

O primer DNS

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.

Segunda pesquisa de DNS

Segunda pesquisa de DNS

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-prefetchpreconnectprefetch 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.

Conectando

Conectando

Enviando (vermelho)

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

Enviando

Enviando

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.

 

Esperando

Esperando

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.

Recebendo

Recebendo

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.
Tempo de evento

Tempo de evento

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.

Cabeçalho de resposta HTTP no GTmetrix

Cabeçalho de resposta HTTP no GTmetrix

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.

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.

Historia

Historia

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.

Comparar relatórios no GTmetrix

Comparar relatórios no GTmetrix

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!

375
Shares