Google PageSpeed Insights: A Verdade sobre a Pontuação 100/100

O Google PageSpeed Insights é sem dúvida uma ferramenta útil para webmasters, desenvolvedores e proprietários de sites de todos os tipos. No entanto, temos notado que muitas pessoas passam horas obcecadas em otimizar seus sites, a fim de tentar obter uma pontuação de 100/100 neste teste.

A verdade é que não é assim que o Google PageSpeed Insights deve ser usado, nem é uma busca que valha a pena. Quando você se concentrar em implementar as recomendações da plataforma em vez de zerar o número no topo da página, você estará criando muito mais benefícios para o seu site.

Este post é um guia abrangente para usar o Google PageSpeed Insights em seu melhor benefício. Cobriremos como o Google utiliza a sua pontuação, bem como a forma de incorporar as recomendações recebidas.

Vamos começar!

Uma Introdução à Página do GoogleSpeed Insights

Se ainda não está familiarizado com o Google PageSpeed Insights, é uma ferramenta utilizada para testar o desempenho do site. Você pode digitar qualquer URL e fazer com que ela seja analisada:

O Google fornece então uma pontuação geral de 100 para o site que você testou, com base em várias melhores práticas de otimização de desempenho:

Juntamente com este resultado, verá também várias recomendações do Google sobre como melhorar o seu desempenho (e, portanto, a sua pontuação no PageSpeed Insights também):

A partir de 2018, as pontuações PageSpeed Insights são calculadas através do Lighthouse, a ferramenta automatizada de código aberto do Google, para melhorar a qualidade geral das páginas web. Esta plataforma pode avaliar todo o tipo de fatores, incluindo desempenho, acessibilidade, aplicações web progressivas, e muito mais.

Para ver a avaliação abrangente do Lighthouse sobre o seu site, você pode usar ferramenta Measure do Google:

Além de realizar uma auditoria de desempenho muito parecida com a que o Google PageSpeed Insights executa, você receberá pontuações de acessibilidade, melhores práticas e Otimização para mecanismos de pesquisa (SEO).

A verdade sobre a pontuação 100/100 na Página do GoogleSpeed Insights

Como mencionamos no início deste post, vemos muitos proprietários e desenvolvedores de sites que ficam obcecados em alcançar uma pontuação perfeita no PageSpeed Insights. Infelizmente, essas pessoas tendem a ignorar o aspecto mais importante dos resultados do teste: as recomendações.

Embora você certamente deva se esforçar para melhorar os tempos de carregamento do seu site tanto quanto possível, obter um 100/100 no Google PageSpeed Insights não é realmente tão importante. Para começar, nem sequer é o teste de desempenho “be-all-end-all”.

Ao contrário da PageSpeed Insights, a Pingdom Tools permite testar o desempenho do seu site a partir de vários locais:

Você também pode executar testes em plataformas como GTmetrix (que combina suas pontuações de PageSpeed Insights e YSlow) e WebPageTest. É provável que a sua pontuação nestas diferentes ferramentas não corresponda exatamente, o que lhe mostra como estes números podem ser arbitrários.

O que realmente importa é a velocidade real do seu site. Para colocar isto em perspectiva, vimos sites com tempos médios de carregamento inferiores a 500 milissegundos (o que é extremamente rápido!) que não têm uma pontuação de 100/100 na PageSpeed Insights.

O outro fator que deve influenciar a sua abordagem à optimização da velocidade é a percepção do desempenho do seu site. Os seus visitantes não querem saber qual é a sua pontuação no Google PageSpeed Insights. Eles só querem poder ver o seu conteúdo o mais rápido possível.

O verdadeiro propósito de testar o desempenho do seu site com o Google PageSpeed Insights não é atingir uma pontuação alta. Em vez disso, é para encontrar pontos problemáticos no seu site, para que você possa otimizá-los e diminuir o tempo real e percebido de carregamento.

Como o Google utiliza a PageSpeed Insights

Além de influenciar a experiência do usuário do seu site (UX), o desempenho também desempenha um papel na SEO. Dado que o PageSpeed Insights é gerido pelo maior e mais popular motor de pesquisa do mundo, é lógico que a sua pontuação possa ter algum efeito nas classificações da sua Página de Resultados do Motor de Pesquisa (SERP) (pelo menos no próprio Google).

A realidade é que o Google utiliza o PageSpeed Insights para determinar as classificações – mais ou menos. A velocidade do local é um facor de classificação, simples e direto. Sua pontuação no teste de desempenho pode lhe dar uma boa idéia de onde você está nessa frente.

No entanto, o Google leva em consideração mais do que apenas o número no círculo na parte superior dos resultados do PageSpeed. Atingir um 100/100 não lhe garante um lugar de topo nos SERPs.

Com isso dito, você ainda pode colocar seus resultados PageSpeed Insights para trabalhar ao melhorar seu SEO. Por exemplo, desde 2018, a velocidade da página móvel tem sido um fator de ranking para o Google. Você notará que seu teste de desempenho fornece dados tanto para a versão desktop quanto para a versão móvel do seu site:

Uma vez que mais de 73% dos utilizadores da Internet móvel afirmam ter encontrado um site que demora demasiado tempo a carregar, as informações no separador Google PageSpeed Insights Mobile são inestimáveis. Usar as recomendações aqui para diminuir os tempos de carga nos smartphones e outros dispositivos deve dar uma vantagem competitiva.

Recomendações do Google PageSpeed Insights (24 maneiras de melhorar o desempenho)

Falamos muito sobre as recomendações da Google PageSpeed Insights neste post. São a verdadeira carne dos resultados dos seus testes de desempenho, e muito mais valiosos do que a sua pontuação real. É por isso que lhes dedicamos o resto deste posto.

Antes de mergulharmos nas sugestões individuais, no entanto, você precisará entender a diferença entre os seus Dados de Campo e os Dados do Laboratório. O primeiro compara o seu site com outros no Relatório de Experiência do Utilizador Chrome nos últimos 30 dias.

Há também dois gráficos que mostram onde a sua Média de Primeira Tinta Contenciosa (FCP) e Primeira Entrada de Retardo (FID) caem:

Na imagem acima, o FCP do nosso site é aproximadamente o mesmo que 45% dos sites no percentil 75, e o nosso FID é aproximadamente o mesmo que 9% do percentil 95.

Lab Data mostra dados específicos para uma carga de página simulada:

Vai reparar que os nossos Dados de Campo e Dados de Laboratório não o fazem match exactly. Isso é perfeitamente normal. Os Dados de Laboratório são criados sob condições fixas, enquanto os Dados de Campo utilizam velocidades de carga reais coletadas ao longo do tempo.

Quando analisados em conjunto, os Dados de Campo e os Dados do Laboratório devem dar uma ideia dos tempos reais de carregamento do seu site. Como mencionámos anteriormente, isto é ainda mais importante do que a sua pontuação geral na PageSpeed, por isso vai querer prestar atenção a estes números.

Depois de considerar essas informações, é hora de começar a melhorar o desempenho do seu site com as recomendações da Google PageSpeed.

1. Eliminar recursos de Render-Blocking

Uma das recomendações mais comuns do Google PageSpeed Insights é eliminar os recursos de render-blocking:

Isto se refere a scripts JavaScript e CSS que estão impedindo a sua página de carregar rapidamente. O browser do visitante tem de descarregar e processar estes ficheiros antes de poder mostrar o resto da página, pelo que ter muitos deles “acima da dobra” pode afetar negativamente a velocidade do seu site.

Você pode aprender mais sobre este assunto em nosso guia para eliminar scripts de render-bloqueio. No que diz respeito ao Google, há duas soluções que você deve considerar:

• Se você não tiver muito JavaScript ou CSS, você pode alinhá-los para se livrar deste aviso. Este processo refere-se à incorporação do seu JavaScript e/ou CSS no seu ficheiro HTML. Você pode fazer isso com um plugin como o Autoptimize. No entanto, isto só é realmente válido para sites muito pequenos. A maioria dos sites WordPress tem JavaScript suficiente para que este método possa realmente atrasá-lo.
• A outra opção é adiar o seu JavaScript. Este atributo baixa seu arquivo JavaScript durante a análise HTML, mas só o executa depois que a análise é concluída. Além disso, scripts com este atributo são executados por ordem de aparecimento na página.

Você encontrará uma lista dos recursos mais afetados por esta questão abaixo da recomendação em seus resultados PageSpeed.

Confira este vídeo para saber mais sobre como eliminar os recursos de render-blocking:

2. Evite Encadear Pedidos Críticos

O conceito de encadear pedidos críticos tem a ver com o Critical Rendering Path (CRP) e como os browsers carregam as suas páginas. Alguns elementos – como o JavaScript e o CSS que discutimos acima – devem ser carregados completamente antes que sua página se torne visível.

Como parte desta sugestão, o Google PageSpeed Insights irá mostrar as cadeias de pedidos na página que está a analisar:

Este diagrama mostrará a série de pedidos dependentes que devem ser atendidos antes que sua página se torne visível. Também lhe dirá o tamanho de cada recurso. Idealmente, você quer minimizar o número de solicitações dependentes, assim como seus tamanhos.

Vários métodos para alcançar esses objetivos são cobertos por outras recomendações discutidas neste post, inclusive:

• Eliminação de recursos de render-blocking
• Diferimento de imagens fora da tela
• CSS e JavaScript Minifying

Além disso, é possível otimizar a ordem em que os ativos são carregados, a fim de encurtar o CRP. Isto significa mover-se acima do conteúdo dobrado para o topo do seu arquivo HTML. Você pode aprender mais sobre como otimizar o CRP em nosso post, “Como to Optimize the Critical Rendering Path in WordPress“.

É importante notar que não há um número mágico de cadeias de pedidos críticos que você precisa trabalhar até. A Google PageSpeed Insights não considera esta auditoria como “aprovada” ou “falhada”, ao contrário de muitas das suas outras recomendações. Esta informação é simplesmente disponibilizada para o ajudar a melhorar os tempos de carregamento.

3. Mantenha a Contagem de Pedidos Baixa e Tamanhos de Transferência Pequenos

Quanto mais pedidos os browsers tiverem de fazer para carregar as suas páginas, e quanto maiores forem os recursos que o seu servidor devolver em resposta, mais tempo o seu site demora a carregar. Portanto, faz sentido que o Google recomende que você minimize o número de solicitações necessárias e diminua o tamanho dos seus recursos.

Tal como a recomendação de evitar encadear pedidos críticos, esta não resulta num ‘passe’ ou ‘reprovação’. Em vez disso, você simplesmente verá uma lista do número de pedidos feitos e seus tamanhos:

Não há um número ideal de pedidos ou tamanhos máximos a ter em mente. Em vez disso, o Google recomenda que você mesmo estabeleça esses padrões criando um orçamento de desempenho. Este é um conjunto de objetivos definidos que podem estar relacionados com aspectos como:

• Tamanhos máximos de imagem
• O número de fontes da web utilizadas
• Quantos recursos externos você chama para
• O tamanho dos scripts e frameworks

A criação de um orçamento de desempenho dá um conjunto de padrões para se responsabilizar. Ao rever o seu orçamento, você pode então tomar decisões sobre eliminar ou otimizar recursos para se ater às suas diretrizes pré-determinadas. Você pode aprender mais sobre como criar um no próprio guia do Google.

4. Minimizar o CSS

Os arquivos CSS são muitas vezes maiores do que precisam ser, a fim de torná-los mais fáceis de serem lidos por humanos. Eles podem incluir vários retornos de carruagens e espaços que não são necessários para que os computadores entendam o seu conteúdo.

Minimizar seu CSS é o processo de condensação de seus arquivos eliminando caracteres, espaços e duplicações desnecessários. O Google recomenda esta prática porque reduz o tamanho dos seus arquivos CSS e, portanto, pode melhorar a velocidade de carregamento:

Estes benefícios de velocidade são a razão pela qual Kinsta construiu um recurso de minificação de código no painel MyKinsta. Os clientes podem optar pela minificação automática do código para seus arquivos CSS e JavaScript, acelerando seus sites com zero esforço de trabalho manual.

Se você não é um cliente Kinsta, recomendamos o uso de um plugin como o Autoptimize ou o WP Rocket para minificar seus arquivos CSS.

5. Minimizar o JavaScript

Assim como você pode reduzir o tamanho do arquivo CSS através da minificação, o mesmo se aplica aos seus arquivos JavaScript:

O Autoptimize ou WP Rocket também pode lidar com esta tarefa para o seu site WordPress.

6. Remover CSS não utilizado

Qualquer código na sua folha de estilos é conteúdo que tem de ser carregado para que a sua página se torne visível aos utilizadores. Se há CSS em seu site que não é realmente útil, está colocando um dreno desnecessário em seu desempenho.

É por isso que o Google recomenda a remoção de qualquer CSS não utilizado:

A solução aqui é essencialmente a mesma que para eliminar o CSS de render-blocking. Você pode inline ou adiar estilos de qualquer forma que faça mais sentido para as suas páginas. Você também pode usar uma ferramenta como o Chrome DevTools para encontrar CSS não utilizado que precisa ser otimizado.

7. Minimizar o trabalho com a linha principal

O ‘fio condutor’ é o elemento principal do navegador do usuário que é responsável por transformar o código em uma página web com a qual os visitantes podem interagir. Ele analisa e executa HTML, CSS e JavaScript. Além disso, é responsável por lidar com as interações dos usuários.

Isto significa que, quando a linha principal está a funcionar através do código do seu site, também não pode lidar com os pedidos dos utilizadores. Se o trabalho com a linha principal do seu site demorar muito tempo, isso pode resultar em tempos de carregamento de páginas baixos e lentos.

O Google PageSpeed sinalizará páginas que levam mais de quatro segundos para concluir o trabalho da linha principal e apresentará uma página web utilizável:

Alguns dos métodos usados para reduzir o trabalho da linha principal já foram cobertos em outras seções deste post, inclusive:

• Minimizando o seu código
• Remoção de código não utilizado
• Implementação do cache

No entanto, você também pode querer considerar a divisão do código. Este processo envolve dividir seu JavaScript em pacotes que executam quando são necessários, em vez de exigir que os navegadores carreguem todos eles antes que a página se torne interativa.

O Webpack é frequentemente utilizado para implementar a divisão de códigos. Note que esta é uma técnica bastante avançada e que os principiantes devem normalmente empreender sozinhos.

8. Reduzir o tempo de execução do JavaScript

A execução JavaScript é muitas vezes o contribuinte mais proeminente para o trabalho com a linha principal. PageSpeed Insights tem uma recomendação separada para alertá-lo se esta tarefa está a ter um impacto significativo no desempenho do seu site:

Os métodos sugeridos acima para reduzir o trabalho com a linha principal também devem resolver este aviso nos resultados da sua PageSpeed.

9. Reduzir o Tempo de Resposta do Servidor (TTFB)

Time to First Byte (TTFB) é uma medida de quanto tempo leva para um navegador receber o primeiro byte de dados de volta do servidor do seu site após fazer um pedido. Embora isto não seja o mesmo que a velocidade geral do seu site, ter um TTFB baixo é compreensivelmente bom para o desempenho do seu site.

Portanto, a redução do tempo de resposta do servidor está entre as recomendações do Google PageSpeed Insights. Se você conseguir um TTFB baixo, você verá esta mensagem em Auditorias aprovadas:

Há vários factores que podem influenciar a sua TTFB. Algumas estratégias para baixá-lo incluem:

• Escolhendo um provedor de hospedagem web de alta qualidade que se concentra na velocidade
• Usando temas leves e plugins
• Reduzindo o número de plugins instalados no seu site
• Utilização de uma Rede de Entrega de Conteúdo (CDN)
• Implementando o cache do navegador
• Seleção de um fornecedor de Sistema de Nomes de Domínio (DNS) sólido

O nosso posto na TTFB é um excelente recurso para mais detalhes sobre optimização nesta área.

10. Imagens de tamanho adequado

Arquivos de mídia como imagens podem ser um verdadeiro arrasto para o desempenho do seu site. Dimensioná-los adequadamente é uma forma simples de reduzir os seus tempos de carregamento:

Se a sua página inclui imagens maiores do que precisam ser, o CSS é usado para redimensioná-las adequadamente. Isto leva mais tempo do que simplesmente carregar as imagens no tamanho certo inicialmente, impactando assim o desempenho da sua página.

Para corrigir isso, você pode carregar imagens nos tamanhos apropriados ou usar ‘imagens responsivas’. Isto envolve a criação de imagens de tamanhos diferentes para vários dispositivos.

Você pode fazer isso usando o atributo srcset, que é adicionado a <img> tags para especificar arquivos de imagem alternativos em tamanhos diferentes. Os navegadores podem ler esta lista, determinar qual a melhor opção para a tela atual e entregar essa versão da sua imagem.

Por exemplo, digamos que você tem uma imagem de cabeçalho e que quer torná-la responsiva. Você poderia carregar três versões dele a 800, 480 e 320 pixels de largura. Então você aplicaria o atributo srcset, assim:

<img srcset="header-image-800w.jpg 880w,
		Header-image-480w.jpg 480w,
		Header-image-320w.jpg 320w"
	sizes="(max-width: 320px) 280px,
		(max-width: 480px) 440px,
		800px"
	src="header-image-800w.jpg">

O atributo srcset especifica os diferentes arquivos disponíveis, e o atributo tamanhos indica aos navegadores qual deles deve ser utilizado com base no tamanho atual da tela.

11. Deferir imagens na tela

O processo de adiamento de imagens fora da tela é mais conhecido como ‘carregamento preguiçoso’. Isto significa que, em vez de fazer o navegador carregar todas as imagens de uma página antes de exibir o conteúdo acima, ele irá carregar apenas aquelas que são imediatamente visíveis.

Menos carga antes que a página se torne visível significa melhor desempenho, e é por isso que o Google recomenda este método:

Existem vários plugins WordPress feitos especificamente para carga preguiçosa, incluindo a3 Lazy Load e Lazy Lazy Load by WP Rocket. Vários plugins de otimização de imagem e desempenho, como o Autoptimize, também possuem recursos de carregamento preguiçoso. Confira nosso guia completo sobre Carregamento Preguiçoso de Imagens e Vídeos no WordPress.

12. Codificar Imagens com Eficiência

Como mencionamos anteriormente neste post, as imagens têm um impacto significativo no desempenho do seu site. Uma das melhores práticas de otimização mais básicas que você pode querer considerar é a compressão, que pode ajudar a reduzir o tamanho dos seus arquivos para que eles sejam carregados mais rapidamente. É também o principal método para seguir a recomendação do Google para codificar imagens de forma eficiente:

A chave é atingir os menores tamanhos de arquivo possíveis, sem sacrificar a qualidade das próprias imagens. Plugins como o Imagify e Smush podem ajudar nesta tarefa. Você pode aprender mais sobre eles em nosso guia de otimização de imagem.

Outras recomendações que influenciam se você ‘passa’ ou ‘falha’ na auditoria de codificação eficiente de imagens incluem:

• Servir as imagens no tamanho correto
• Implementar carregamento preguiçoso (adiar imagens fora da tela)
• Conversão de imagens para formatos de arquivo de próxima geração, tais como WebP
• Utilização de formatos de vídeo para conteúdos animados, como GIFs

Além de comprimir suas imagens, você pode seguir os passos para cumprir estas sugestões como descrito em outra parte deste post.

13. Servir Imagem em Formatos Próximos Gêneros

Há alguns formatos de arquivo de imagem que são carregados mais rapidamente do que outros. Infelizmente, eles não são os seus formatos PNG ou JPEG comumente vistos. As imagens WebP estão se tornando o novo padrão, e o Google PageSpeed irá informá-lo se suas imagens não estiverem aderindo a ele:

Isto pode parecer uma recomendação difícil de cumprir, já que você provavelmente já tem muitas imagens no seu site WordPress. Felizmente, há plugins que podem ajudar. Por exemplo, Imagify e Smush oferecem ambos um recurso de conversão WebP.

14. Use Formatos de Vídeo para Conteúdo Animado

Os GIFs podem ser uma forma eficaz de conteúdo visual em uma variedade de situações. Passeios tutoriais, críticas de recursos e até mesmo animações bem humoradas podem elevar suas postagens e torná-las mais agradáveis e valiosas para os leitores.

Infelizmente, esses benefícios têm um custo para o seu desempenho. Os GIFs são exigentes de carregar, e é por isso que a PageSpeed Insights recomenda, em vez disso, servir conteúdo de vídeo:

Infelizmente, a conversão de GIFs para formatos de vídeo não é o processo mais simples. Primeiro, você terá que decidir que tipo de vídeo você quer usar:

• MP4: Produz arquivos ligeiramente maiores, mas é compatível com a maioria dos principais navegadores.
• WebM: O formato de vídeo mais otimizado, embora tenha compatibilidade limitada com o navegador.

Depois de ter feito a escolha que faz mais sentido para o seu site, você precisará converter os formatos de arquivo. A melhor maneira de fazer isto é através da linha de comando. Para começar, instale o FFmpeg. Esta é uma ferramenta de código aberto para a conversão de formatos de arquivo:

Depois, abra a sua interface de linha de comando e execute o seguinte comando:

ffmpeg -i input.gif output.mp4

Isto irá converter o GIF com o nome do arquivo input.gif em um vídeo MP4 com o nome do arquivo output.mp4. Mudar o formato é apenas o começo, no entanto. Agora você precisa incorporar o vídeo resultante no seu site WordPress de uma forma que o faça parecer um GIF animado.

Incorporação de Conteúdo de Vídeo para Animações

Como você já deve ter notado se já viu um GIF antes, eles são ligeiramente diferentes dos vídeos normais. Eles normalmente tocam e correm em loop, e estão sempre sem som. Incorporar seu novo arquivo MP4 ou WebM no seu site WordPress não produzirá esses recursos.

No entanto, você pode recriá-los com algum código muito simples. Carregue o seu vídeo para a sua biblioteca multimédia, e depois adicione o seguinte à página ou ao post onde pretende incluir o seu GIF:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

 

Isto irá aplicar os atributos especificados ao seu vídeo, fazendo-o parecer mais ‘GIF-like’. Basta adaptar o nome e o tipo do ficheiro para corresponder ao do seu recurso. Para mais detalhes sobre este assunto, sugerimos a leitura do guia do Google sobre a conversão de GIFs em vídeos.

15. Certifique-se de que o texto permanece visível durante o carregamento da fonte da Web

Como as imagens, as fontes tendem a ser grandes arquivos que levam muito tempo para serem carregados. Em alguns casos, os navegadores podem ocultar seu texto até a fonte que você está usando completamente, o que resultará nesta recomendação do Google PageSpeed Insights:

O Google aconselha você a resolver esse problema aplicando a diretiva Font Display API swap no seu estilo @font-face. Para fazer isso, acesse sua folha de estilos (style.css) e adicione o seguinte após o atributo src em @font-face:

font-display: swap

Você pode aprender mais sobre otimização de fontes web no nosso post “Como to Change Fonts In WordPress” e no nosso guia detalhado de hospedagem de fontes locais.

16. Habilitar Compressão de Texto

A recomendação do Google PageSpeed Insights’ Enable Text compression refere-se ao uso da compressão GZIP:

Em alguns casos (como você pode ver na imagem acima) a compressão de texto será ativada automaticamente no seu servidor. Se este não for o caso do seu site, você tem algumas opções para seguir esta recomendação.

O primeiro é instalar um plugin com um recurso de compressão GZIP. WP Rocket é uma solução viável se você estiver disposto a pagar por ela.

Você também pode comprimir seu texto manualmente. Isto envolve a edição de seu arquivo .htaccess, o que pode ser arriscado, portanto, certifique-se de ter um backup recente em mãos.

A maioria dos sites WordPress são executados em servidores Apache. O código para ativar a compressão GZIP tem este aspecto:

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

 

Você deve adicioná-lo depois de #END no seu arquivo .htaccess. Se você tiver o seu site WordPress em um servidor Nginx, você deve adicionar o seguinte código ao seu arquivo nginx.conf:

36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Se você gostaria de verificar a compressão de texto do seu site, sugerimos o uso de uma ferramenta como o GiftOfSpeed:

Isto irá informá-lo se a compressão GZIP foi implementada com sucesso, bem como em que tipo de servidor seu site está rodando e alguns outros detalhes chave.

17. Pré-conexão às Origens Requeridas

Há grandes chances de que você provavelmente tenha pelo menos um recurso de terceiros no seu site – o Google Analytics é um exemplo comum. Pode levar tempo para que os navegadores estabeleçam uma conexão com esses recursos, diminuindo a velocidade de carregamento.

Usando atributos de pré-conexão pode dizer aos navegadores imediatamente que há scripts de terceiros na sua página que precisam ser carregados. O processo de solicitação pode então iniciar o mais rápido possível, melhorando o seu desempenho.

Se o Google achar que sua página pode se beneficiar desta técnica, você verá a sugestão Pré-conexão às origens necessárias:

Existem algumas formas de implementar esta estratégia de optimização. Se você está confortável com a edição de seus arquivos temáticos do WordPress, você pode adicionar uma tag de link ao seu arquivo header.php. Aqui está um exemplo:

<link rel=“preconnect” href=“example.com”>

 

Neste caso, a tag diz aos navegadores que eles precisam estabelecer uma conexão com o site example.com o mais rápido possível. O Google PageSpeed Insights listará quaisquer recursos relevantes para os quais você deve adicionar tags de link com atributos de pré-conexão.

A outra opção é usar um plugin para obter o mesmo efeito. Perfmatters inclui uma funcionalidade de pré-conexão (disclaimer: Sou um dos fundadores da Perfmatters). WP Rocket e Pre* Party Resource Hints incluem funcionalidade similar.

18. Pedidos de chaves de pré-carga

Semelhante à recomendação de Pré-conexão às origens exigidas, seguir esta sugestão permite minimizar o número de solicitações que os navegadores devem fazer ao servidor do seu site. No entanto, em vez de se conectar a recursos de terceiros, as solicitações de chave de pré-carga referem-se ao carregamento de ativos críticos em seu próprio servidor:

A implementação desta técnica é muito semelhante à recomendação anterior também. Você pode adicionar tags de link especificando os recursos listados em PageSpeed Insights ao seu arquivo header.php:

<link rel=“preload” href=“example.com”>

 

Você também pode incorporar esta tag usando Perfmatters, WP Rocket, ou Pre* Party Resource Hints.

19. Evite Redirecionar Múltiplas Páginas

Os redirecionamentos são usados quando você quer que um URL aponte para outro. Eles são normalmente empregados quando você move ou exclui uma página do seu site. Embora não haja nada de errado em usar redirecionamentos em geral, eles causam atrasos adicionais no tempo de carregamento.

Se você tiver muitos redirecionamentos em seu site, você pode ver esta recomendação no Google PageSpeed Insights:

A única coisa que você pode fazer em resposta a esta recomendação é certificar-se de que você só está usando redirecionamentos quando for absolutamente necessário. Você pode aprender mais sobre o processo de criação deles em nosso post, “WordPress Redirect – Best Practices for Better Performance“.

20. Servir bens estáticos com uma Política de Cache Eficiente

Se você tem usado o Google PageSpeed Insights há algum tempo, você pode conhecer melhor esta recomendação como o aviso de cache do navegador Leverage. Na Versão 5, está agora rotulado como Servir Bens Estáticos com uma Política de Cache Eficiente:

Esta sugestão tem algumas camadas que precisamos de analisar. A primeira é o que significa “caching”. Em suma, é um processo em que os navegadores guardam cópias das suas páginas, para que possam ser carregadas mais rapidamente em futuras visitas.

A forma mais comum de implementar o cache em sites WordPress é com plugins. WP Rocket e W3 Total Cache são opções populares. No entanto, alguns provedores de hospedagem – incluindo nós aqui na Kinsta – permitem o cache através dos seus servidores. Certifique-se de verificar e ver se este é o caso do seu host antes de instalar um plugin de caching.

Uma vez ativado o cache do seu site, você pode se preocupar com a segunda parte desta recomendação, que é a ‘eficiência’ da sua política de cache. Os navegadores limpam as suas caches periodicamente para as refrescar com cópias atualizadas.

Idealmente, você quer que este período de tempo seja mais alto em vez de mais baixo. Se você está limpando o seu site das caches do navegador a cada duas horas, isso derrota o propósito de usar esta técnica em primeiro lugar. Você pode otimizar seu período de expiração do cache usando os cabeçalhos Cache-Control e Expires.

Adicionando Cabeçalhos Cache-Control

Use o seguinte código para adicionar cabeçalhos Cache-Control no Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
 expires 30d;
 add_header Cache-Control "public, no-transform";
}

Você deve adicionar isto ao arquivo de configuração do seu servidor. No exemplo acima, os tipos de arquivo especificados estão definidos para expirar após 30 dias.

Aqueles com servidores Apache devem usar este snippet em seus arquivos .htaccess:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

Adicione este código antes de #BEGIN WordPress ou depois de #END WordPress. Neste exemplo, o período de expiração do cache está definido para 84.600 segundos.

Adicionando Cabeçalhos Expirados

Os cabeçalhos do Cache-Control são praticamente o padrão agora. No entanto, existem algumas ferramentas (incluindo GTMetrix) que ainda verificam a existência de cabeçalhos Expires.

Você pode adicionar cabeçalhos expirados a um servidor Nginx, incorporando o seguinte em seu bloco de servidores:

location ~*  \.(jpg|jpeg|gif|png|svg)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 2d;
    }

Você deve definir tempos de expiração diferentes com base em tipos de arquivo. Os servidores Apache produzirão os mesmos resultados se você adicionar este código ao seu arquivo .htaccess:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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 image/svg "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 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

 

Mais uma vez, você deve adicionar este código antes de #BEGIN WordPress ou depois de #END WordPress.

Caching Eficiente do Google Analytics

Ironicamente, o script do Google Analytics que você pode ter adicionado aos cabeçalhos das suas páginas para rastrear o comportamento do usuário tem um período de validade de cache de apenas duas horas. Isto é provável para que, se forem feitas atualizações na plataforma, os usuários tenham acesso às mudanças rapidamente.

Este script aparecerá na lista de recursos que requerem sua atenção sob a recomendação Serve ativos estáticos com uma política de cache eficiente. Como pertence a um terceiro, você não pode alterar o período de validade com o Cache-Control ou os cabeçalhos Expires.

Se este é o único script listado sob esta recomendação, você ainda pode passar na auditoria:

No entanto, como notámos ao longo deste post, a sua pontuação PageSpeed importa menos do que o seu desempenho real e percebido. A fim de servir este recurso com eficiência, você pode considerar hospedar o Google Analytics localmente.

Plugins como CAOS (Complete Analytics Optimization Suite) e Perfmatters lhe permitirão fazer isso. Você pode ler mais sobre o processo em nosso guia completo para esta sugestão de PageSpeed.

21. Reduzir o Impacto do Código de Terceiros

Mencionámos agora algumas formas diferentes em que os scripts de terceiros podem afetar negativamente o seu desempenho e resultar em auditorias falhadas a partir do PageSpeed Insights. Idealmente, é melhor limitar a sua confiança nestas ferramentas para prevenir efeitos adversos.

No entanto, em alguns casos, a melhor solução para uma necessidade que o seu site tem é incorporar um script de terceiros. O Google Analytics é um excelente exemplo. Outros incluem:

• Botões de compartilhamento de mídia social e feeds
• vídeos do YouTube incorporados
• iFrames para anúncios e outros conteúdos
• Bibliotecas para JavaScript, fontes e outros elementos

Nos casos em que você julgar necessário o uso de um script de terceiros, é importante ainda reduzir seu impacto no desempenho do seu site, como os resultados da sua análise PageSpeed lhe dirão:

Para carregar código de terceiros de forma mais eficiente, você pode considerar uma das técnicas que já mencionamos neste post:

• Deferir o carregamento do JavaScript
• Use tags de ligação com atributos de pré-conexão
• Scripts auto-hospedados de terceiros (como descrito acima com o Google Analytics)

Estes métodos devem minimizar o impacto sobre o desempenho do seu site.

22. Evite Enormes Cargas Úteis na Rede

Esta recomendação é particularmente relevante para os seus visitantes móveis. Grandes cargas úteis podem exigir o uso de mais dados celulares, custando assim dinheiro aos seus usuários. A minimização do número de solicitações de rede necessárias para chegar às suas páginas pode evitar isso:

O Google recomenda manter o tamanho total do seu byte em 1.600 KB ou menos. Os métodos mais utilizados para alcançar este objetivo são encontrados em todo este posto, inclusive:

• Diferimento de CSS, JavaScript, e imagens que estão abaixo da dobra
• Código Minificador
• Compressão de ficheiros de imagem
• Usando o formato WebP para imagens
• Implementação do cache

Siga os passos relevantes para estas estratégias, e você deve passar esta auditoria sem nenhum esforço adicional.

23. Marcas de tempo e medidas do usuário

Esta recomendação só é relevante se você estiver usando a API de temporização do usuário. Esta ferramenta cria carimbos temporais para o ajudar a avaliar o desempenho do seu JavaScript. Se você configurou o API para o seu site, você verá suas marcas e medidas sob este título em PageSpeed Insights:

Como você pode ver, esta é outra sugestão do Google que não resulta em um ‘passe’ ou ‘falha’. PageSpeed Insights simplesmente torna esta informação facilmente recuperável, para que você possa usá-la para avaliar áreas que possam requerer otimização.

Se você estiver interessado em incorporar a API de Temporização do Usuário no seu site WordPress, você pode aprender mais no guia do Mozilla sobre o tópico.

24. Evitar um Modelo de Objeto de Documento Excessivo (DOM) Tamanho

Em termos mais simples, o DOM é como os navegadores transformam HTML em objetos. Envolve o uso de uma estrutura de árvore composta por nós individuais que representam cada um um objeto. Naturalmente, quanto maior for o DOM da sua página, mais tempo demorará a carregar.

Se a sua página excede certos padrões em relação ao tamanho DOM, recomendará reduzir o número de nós, bem como a complexidade do seu estilo CSS:

Um culpado comum se você ‘falhou’ esta auditoria no PageSpeed Insights é o seu tema WordPress. Temas pesados muitas vezes adicionam grandes volumes de elementos ao DOM, e podem também incluir um estilo complicado que torna o seu site mais lento. Se este for o caso, você pode precisar trocar de temas.

Resumo

O Google PageSpeed Insights deve ser um dos elementos básicos na sua caixa de ferramentas do webmaster. No entanto, fixar na sua pontuação e ficar obcecado em alcançar os cobiçados 100/100 provavelmente não é o melhor uso do seu tempo. Isso pode afastá-lo de outras tarefas importantes que poderiam proporcionar benefícios mais significativos.

Neste post, nós cobrimos as formas como a sua pontuação na página Google PageSpeed faz e não importa. Também compartilhamos algumas breves diretrizes para colocar as recomendações da plataforma para trabalhar em seu site WordPress, a fim de melhorar seu desempenho.

Você tem perguntas sobre o Google PageSpeed Insights ou sobre a otimização do desempenho do seu site? Pergunte na seção de comentários abaixo!