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 é um esforço que realmente vale a pena. Quando você foca em implementar as recomendações da plataforma, em vez de se fixar no número que aparece no topo da página, você gera muito mais benefícios reais para o seu site.
Este artigo é um guia completo para usar o Google PageSpeed Insights da melhor forma possível. Vamos explicar como o Google usa sua pontuação e como incorporar as recomendações que você recebe.
Vamos começar!
O que é o Google PageSpeed Insights?
O Google PageSpeed Insights é uma ferramenta usada para testar o desempenho de sites. Você pode inserir qualquer URL para que ele seja analisado.
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, aplicativos progressivos (PWAs) e muito mais.
Para ver a avaliação completa do Lighthouse sobre seu site, você pode usar a ferramenta Google Measure:
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 alcançar 100/100 no Google PageSpeed Insights
Como mencionamos no início deste artigo, vemos muitos proprietários de sites e desenvolvedores que ficam obcecados em conseguir uma pontuação perfeita no PageSpeed Insights. Infelizmente, essas pessoas acabam ignorando o aspecto mais importante dos resultados do teste: as recomendações.
Embora você deva, sim, buscar melhorar ao máximo o tempo de carregamento do seu site, alcançar 100/100 no Google PageSpeed Insights não é algo tão essencial. Para começar, ele nem sequer é o teste definitivo para medir desempenho “be-all-end-all”.
Diferente do PageSpeed Insights, por exemplo, o Pingdom Tools permite testar o desempenho do seu site a partir de diferentes localizações:
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 sua pontuação nessas diferentes ferramentas não corresponda exatamente, o que mostra como esses números podem ser arbitrários.
O que realmente importa é a velocidade real do seu site. Para colocar isso em perspectiva, vimos sites com tempos médios de carregamento inferiores a 500 milissegundos (o que é extremamente rápido!) que mesmo assim não alcançam 100/100 no PageSpeed Insights.
Outro fator que deve influenciar sua abordagem na otimização de velocidade é o desempenho percebido do site. Seus visitantes não se importam com a pontuação do Google PageSpeed Insights; eles só querem acessar 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 é alcançar uma pontuação alta. É identificar pontos problemáticos no seu site, para que você possa otimizá-los e reduzir tanto o tempo de carregamento real quanto o percebido.
Como o Google usa o PageSpeed Insights?
Além de influenciar a Experiência do Usuário (UX) do seu site, o desempenho também tem papel no SEO. Como o PageSpeed Insights é operado pelo mais popular mecanismo de pesquisa do mundo, faz sentido pensar que sua pontuação possa afetar seu posicionamento nos resultados de pesquisa (SERPs) — pelo menos no próprio Google.
Na prática, o Google usa realmente os dados do PageSpeed Insights para determinar rankings — de certa forma. A velocidade do site é um fator de ranqueamento, simples assim. Sua pontuação no teste de desempenho pode dar uma boa noção de onde você está nessa questão.
No entanto, o Google considera muito mais do que apenas o número no círculo no topo dos resultados do PageSpeed. Alcançar 100/100 não garante que você estará nas primeiras posições das SERPs.
Dito isso, você ainda pode usar os resultados do PageSpeed Insights a seu favor para melhorar seu SEO. Desde 2018, a velocidade das páginas para dispositivos móveis passou a ser um fator de ranqueamento no Google. Você vai perceber que o teste de desempenho oferece dados tanto para a versão desktop quanto para a versão mobile do seu site:
Como mais de 73% dos usuários de internet móvel dizem já ter encontrado sites que demoram demais para carregar, as informações na aba Mobile do PageSpeed Insights são extremamente valiosas. Seguir as recomendações dessa seção para diminuir o tempo de carregamento em smartphones e outros dispositivos pode te dar uma vantagem competitiva.
Recomendações do Google PageSpeed Insights (24 maneiras de melhorar o desempenho)
Falamos bastante neste artigo sobre as recomendações do Google PageSpeed Insights. Elas são a parte mais relevante dos resultados do teste — muito mais importantes do que a pontuação final. É por isso que vamos dedicar o restante deste artigo a elas.
Antes de abordarmos sugestões específicas, no entanto, você precisa entender a diferença entre Field Data (dados de campo) e Lab Data (dados de laboratório). Field Data compara seu site com outros no Chrome User Experience Report dos últimos 30 dias.
Ele também exibe dois gráficos mostrando onde sua média de First Contentful Paint (FCP) e First Input Delay (FID) se encaixam:
Na imagem acima, o FCP do nosso site está similar a 45% dos sites no 75º percentil, e o FID está similar a 9% no 95º percentil.
Lab Data mostra dados específicos de um carregamento de página simulado:
Você notará que os dados de campo e de laboratório não coincidem exatamente — e isso é totalmente normal. O Lab Data é gerado sob condições fixas, enquanto o Field Data usa velocidades reais coletadas ao longo do tempo.
Analisando os dois em conjunto, você terá uma boa ideia dos tempos reais de carregamento do seu site. Como mencionamos antes, isso é ainda mais importante do que a pontuação geral no PageSpeed, então vale a pena prestar atenção nesses números.
Após entender essas informações, é hora de começar a melhorar o desempenho do seu site com base nas recomendações do Google PageSpeed.
1. Elimine recursos que bloqueiam a renderização (Render-Blocking)
Uma das recomendações mais comuns do Google PageSpeed Insights é eliminar os recursos que bloqueiam a renderização (render-blocking):
Isso se refere a scripts JavaScript e CSS que estão impedindo sua página de carregar rapidamente. O navegador do visitante precisa baixar e processar esses arquivos antes de exibir o restante da página, então ter muitos deles acima da dobra pode impactar negativamente a velocidade do site.
Você pode aprender mais sobre esse problema no nosso guia sobre como eliminar scripts que bloqueiam a renderização. Segundo o Google, há duas soluções principais a considerar:
- Se você não tiver muito JavaScript ou CSS, pode incorporá-los diretamente ao arquivo HTML (inline) para eliminar esse alerta. Isso pode ser feito com um plugin como Autoptimize. No entanto, essa abordagem só é válida para sites muito pequenos — a maioria dos sites WordPress tem tanto JavaScript que esse método poderia até deixar o site mais lento.
- A outra opção é adiar (defer) o JavaScript. Esse atributo faz com que o arquivo JavaScript seja baixado durante a análise do HTML, mas só seja executado após a conclusão dessa análise. Além disso, scripts com esse atributo são executados na ordem em que aparecem na página.
No relatório do PageSpeed, você encontrará uma lista dos recursos mais afetados por esse problema logo abaixo da recomendação.
Confira este vídeo para saber mais sobre como eliminar os recursos que bloqueiam a renderização:
2. Evite o encadeamento de requisições críticas
O conceito de encadeamento de requisições críticas tem a ver com o Critical Rendering Path (CRP) e como os navegadores carregam suas páginas. Certos elementos — como JavaScript e CSS que discutimos acima — precisam ser totalmente carregados antes que sua página se torne visível.
Como parte dessa recomendação, o Google PageSpeed Insights mostrará o encadeamento de requisições na página que você está analisando:
Esse diagrama mostrará a série de requisições dependentes que devem ser atendidas antes que sua página fique visível. Ele também indicará o tamanho de cada recurso. O ideal é minimizar tanto o número de requisições dependentes quanto o tamanho delas.
Vários métodos para alcançar esses objetivos já estão cobertos por outras recomendações deste artigo, incluindo:
-
Elimine recursos que bloqueiam a renderização
-
Adie imagens fora da tela
- Minifique JavaScript e CSS
Além disso, você pode otimizar a ordem em que os ativos são carregados para encurtar o CRP. Isso significa mover o conteúdo acima da dobra para o topo do arquivo HTML. Você pode saber mais sobre como otimizar o CRP no nosso artigo “Como otimizar o Caminho Crítico de Renderização no WordPress”.
Importante: não existe um número mágico de encadeamentos de requisições críticas que você precise atingir. O Google PageSpeed Insights não considera essa auditoria como aprovada ou reprovada, ao contrário de muitas outras recomendações. Essas informações são disponibilizadas apenas para ajudar você a melhorar os tempos de carregamento.
3. Mantenha o número de requisições baixo e os tamanhos de transferência pequenos
Quanto mais requisições os navegadores precisam fazer para carregar suas páginas — e quanto maiores são os recursos que seu servidor devolve — mais tempo seu site leva para carregar. Por isso, faz todo sentido que o Google recomende minimizar o número de requisições necessárias e diminuir o tamanho dos recursos.
Assim como a recomendação de evitar encadeamento de requisições críticas, esta também não gera um status de aprovado/reprovado. Em vez disso, você verá apenas uma lista mostrando o número de requisições feitas e seus tamanhos:
Não existe um número ideal de requisições nem um tamanho máximo exato para seguir. Em vez disso, o Google recomenda que você defina seus próprios padrões criando um orçamento de desempenho — um conjunto de metas específicas que podem incluir aspectos como:
- Tamanhos máximos de imagem
- O número de fontes da web utilizadas
- Quantidade de recursos externos chamados
- O tamanho dos scripts e frameworks
Criar um orçamento de desempenho ajuda você a estabelecer padrões claros para monitorar. Quando você ultrapassa esse orçamento, pode decidir se elimina ou otimiza recursos para continuar dentro das diretrizes estabelecidas. Quer saber mais? Consulte o guia oficial do Google sobre como criar um orçamento de desempenho.
4. Minifique CSS
Os arquivos CSS geralmente são maiores do que precisam ser, para facilitar a leitura humana. Eles podem incluir várias quebras de linha e espaços desnecessários para que os computadores entendam seu conteúdo.
Minificar o CSS significa condensar os arquivos eliminando caracteres, espaços e duplicações desnecessárias. O Google recomenda essa prática porque ela reduz o tamanho dos arquivos CSS e, portanto, pode melhorar o tempo de carregamento:
Para minificar seus arquivos CSS, recomendamos o uso de plugins como Autoptimize ou WP Rocket.
5. Minifique o JavaScript
Assim como acontece com os arquivos CSS, você também pode reduzir o tamanho dos arquivos JavaScript através da minificação:
O Autoptimize ou o WP Rocket também podem realizar essa tarefa no seu site WordPress.
6. Remova o CSS não utilizado
Qualquer código presente na sua folha de estilo é conteúdo que precisa ser carregado para que a página fique visível para os usuários. Se há CSS no seu site que não é realmente necessário, ele representa um peso desnecessário no desempenho.
Por isso, o Google recomenda remover qualquer CSS não utilizado:
A solução aqui é basicamente a mesma da exclusão de CSS que bloqueia a renderização. Você pode incorporar (inline) ou adiar (defer) estilos da forma que fizer mais sentido para suas páginas. Também pode usar ferramentas como o Chrome DevTools para identificar CSS não utilizado que precise ser otimizado.
7. Minimize o trabalho na thread principal
A thread principal é o elemento principal do navegador do usuário responsável por transformar o código em uma página interativa. Ela analisa e executa HTML, CSS e JavaScript, além de lidar com interações do usuário.
Isso significa que, enquanto a thread principal está processando o código do site, ela não pode lidar simultaneamente com solicitações do usuário. Se o trabalho da thread principal levar muito tempo, isso pode resultar em uma experiência ruim (UX) e em páginas mais lentas para carregar.
O Google PageSpeed sinaliza páginas que levam mais de quatro segundos para concluir o trabalho da thread principal e apresentar uma página utilizável:
Alguns dos métodos para reduzir o trabalho da thread principal já foram abordados em outras partes deste post, incluindo:
- 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 usado para implementar code splitting. Vale destacar que essa é uma técnica avançada e não costuma ser recomendada para iniciantes fazerem sozinhos.
8. Reduza o tempo de execução do JavaScript
A execução de JavaScript costuma ser o maior responsável pelo trabalho na thread principal. O PageSpeed Insights tem uma recomendação separada para alertar você caso essa tarefa esteja impactando significativamente o desempenho do seu site:
Os métodos já sugeridos para reduzir o trabalho da thread principal também devem ajudar a resolver esse alerta nos resultados do PageSpeed.
9. Reduza o Time to First Byte (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 isso não seja o mesmo que a velocidade geral do seu site, ter um TTFB baixo é compreensivelmente bom para o desempenho do seu site.
Por isso, reduzir os tempos de resposta do servidor está entre as recomendações do Google PageSpeed Insights. Se você conseguir alcançar um TTFB baixo, verá essa mensagem em Auditorias aprovadas:
Algumas estratégias para reduzir o TTFB incluem:
- Escolher 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 artigo sobre TTFB é um excelente recurso para mais detalhes sobre otimização nesta área.
10. Dimensione as imagens corretamente
Arquivos de mídia, como imagens, podem prejudicar seriamente o desempenho do seu site. Dimensioná-los corretamente é uma maneira simples de reduzir o tempo de carregamento:
Se sua página inclui imagens maiores do que o necessário, o CSS é usado para redimensioná-las adequadamente. Isso leva mais tempo do que simplesmente carregar as imagens já no tamanho correto, impactando assim o desempenho da 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 às tags <img> para especificar arquivos de imagem alternativos em diferentes tamanhos. Os navegadores leem essa lista, determinam qual opção é melhor para o tamanho de tela atual e entregam aquela versão da imagem.
Por exemplo, digamos que você tenha uma imagem de cabeçalho e queira torná-la responsiva. Você poderia carregar três versões dela: 800, 480 e 320 pixels de largura. Então 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 sizes informa aos navegadores qual deles deve ser usado com base no tamanho atual da tela.
11. Adie imagens fora da tela
O processo de adiar imagens fora da tela é mais conhecido como lazy loading (carregamento preguiçoso). Isso significa que, em vez de fazer o navegador carregar todas as imagens de uma página antes de exibir o conteúdo acima da dobra, ele só carregará as que estão imediatamente visíveis.
Menos carregamento antes que a página fique visível significa melhor desempenho, e é por isso que o Google recomenda esse método:
Existem vários plugins WordPress feitos especificamente para lazy loading, incluindo o 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. Codifique imagens de forma eficiente
Como já mencionamos, as imagens têm um impacto significativo no desempenho do site. Uma das práticas básicas de otimização que você deve considerar é a compressão, que ajuda a reduzir o tamanho dos arquivos para serem carregados mais rapidamente. Essa também é a principal forma de seguir a recomendação do Google de codificar imagens de forma eficiente:
O segredo aqui é atingir o menor tamanho de arquivo possível sem sacrificar a qualidade visual. Plugins como Imagify e Smush podem ajudar bastante nessa tarefa. Você pode saber mais sobre eles no nosso guia de otimização de imagens.
Outras recomendações que influenciam se você passa ou falha nessa auditoria incluem:
- Servir as imagens no tamanho correto
-
Implementar lazy loading (adiar imagens fora da tela)
-
Converter imagens para formatos de próxima geração, como WebP
-
Usar formatos de vídeo para conteúdos animados (como GIFs)
Além de comprimir suas imagens, você pode seguir os passos dessas outras sugestões descritas ao longo deste artigo.
13. Sirva imagens em formatos de próxima geração
Alguns formatos de imagem carregam muito mais rapidamente que outros. Infelizmente, não estamos falando dos tradicionais PNG ou JPEG. As imagens WebP estão se tornando o novo padrão, e o Google PageSpeed vai alertar você se suas imagens não estiverem adequadas a ele:
Pode parecer uma recomendação difícil de cumprir, já que você provavelmente já possui muitas imagens no seu site. 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. Tutoriais passo a passo, demonstrações de funcionalidades e até animações humorísticas podem enriquecer seus artigos e torná-los mais envolventes e valiosos para os leitores.
Infelizmente, esses benefícios têm um custo para o desempenho. GIFs são pesados para carregar, e é por isso que o PageSpeed Insights recomenda usar conteúdo em 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 isso é 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.mp4Esse comando converterá o GIF chamado input.gif em um vídeo MP4 chamado output.mp4. No entanto, mudar o formato é apenas o primeiro passo. Agora, você precisa incorporar o vídeo resultante no seu site de forma que ele se comporte como um GIF animado.
Incorporando conteúdo em vídeo para animações
Como você já deve ter notado, GIFs se comportam de maneira um pouco diferente dos vídeos normais. Eles geralmente tocam automaticamente, em loop e sem som. Incorporar um arquivo MP4 ou WebM não reproduz automaticamente esses comportamentos.
No entanto, você pode replicá-los com um código bem simples. Carregue o vídeo na sua biblioteca de mídia e adicione o seguinte trecho na página ou artigo onde deseja incluí-lo:
<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>Isso aplicará os atributos necessários para que o vídeo se comporte de forma semelhante a um GIF. Basta adaptar o nome e o tipo do arquivo conforme o recurso que estiver usando. Para saber mais sobre esse assunto, recomendamos a leitura do guia do Google sobre conversão de GIFs para vídeos.
15. Garanta que o texto permaneça visível durante o carregamento da fonte web
Assim como as imagens, fontes costumam ser arquivos grandes que demoram para carregar. Em alguns casos, o navegador pode ocultar o texto até que a fonte esteja completamente carregada — o que gera a seguinte recomendação no Google PageSpeed Insights:
O Google sugere resolver isso aplicando a diretiva swap da Font Display API na sua regra @font-face. Para isso, acesse sua folha de estilos (style.css) e adicione o seguinte logo após o atributo src no bloco @font-face
font-display: swap
Você pode aprender mais sobre otimização de fontes web no nosso artigo “Como mudar fontes no WordPress” e no nosso guia detalhado sobre hospedagem de fontes locais.
16. Habilite 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 mostra a imagem acima), a compressão de texto já estará habilitada automaticamente no seu servidor. Caso contrário, você tem algumas opções para seguir essa recomendação.
A primeira é instalar um plugin com recurso de compressão GZIP. O WP Rocket é uma boa opção, se você estiver disposto a investir.
Você também pode comprimir seu texto manualmente. Isso envolve a edição do 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 habilitar a compressão GZIP é:
<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>Adicione esse bloco após o #END no seu arquivo .htaccess. Se o seu site WordPress estiver em um servidor Nginx, adicione o seguinte código no 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:
A ferramenta mostra se a compressão foi aplicada com sucesso, o tipo de servidor em uso e outros detalhes técnicos importantes.
17. Faça pré-conexão com origens necessárias
É bem provável que você tenha pelo menos um recurso de terceiros em seu site — o Google Analytics é um exemplo comum. Os navegadores levam tempo para estabelecer conexão com esses recursos, o que pode diminuir a velocidade de carregamento.
O uso de atributos preconnect informa imediatamente ao navegador que há scripts de terceiros na sua página que precisam ser carregados. Isso permite que o processo de solicitação comece quanto antes, melhorando o desempenho.
Se o Google considerar que sua página pode se beneficiar dessa técnica, você verá a recomendação Preconnect to required origins:
Há algumas maneiras de implementar essa estratégia. Se você está confortável em editar os arquivos do seu tema WordPress, pode adicionar uma tag <link> no arquivo header.php. Exemplo:
<link rel=“preconnect” href=“example.com”>Nesse caso, a tag informa ao navegador que ele precisa estabelecer uma conexão com example.com o mais rápido possível. O PageSpeed Insights listará os recursos para os quais você deve adicionar tags com o atributo preconnect.
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. Pré-carregue solicitações-chave
Assim como a recomendação anterior, seguir essa sugestão ajuda a reduzir o número de requisições que os navegadores precisam fazer ao servidor do seu site. No entanto, em vez de se conectar a recursos de terceiros, Preload key requests refere-se ao carregamento de ativos críticos do seu próprio servidor:
Implementar essa técnica é muito semelhante à anterior. Você pode adicionar tags <link> especificando os recursos listados no PageSpeed Insights diretamente no seu arquivo header.php:
<link rel=“preload” href=“example.com”>Você também pode aplicar essa tag usando os plugins Perfmatters, WP Rocket ou Pre* Party Resource Hints.
19. Evite múltiplos redirecionamentos de página
Redirecionamentos são usados quando você deseja que uma URL aponte para outra. São comuns quando você move ou exclui uma página no site. Embora não haja nada de errado em usá-los, redirecionamentos causam atrasos adicionais no 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 saber mais sobre como criá-los no artigo “Redirecionamentos no WordPress – Melhores práticas para melhorar o desempenho”.
20. Sirva ativos estáticos com uma política de cache eficiente
Se você já usa o Google PageSpeed Insights há algum tempo, talvez conheça essa recomendação como o antigo aviso “Leverage browser caching”. A partir da Versão 5, ela passou a ser chamada de Serve Static Assets With an Efficient Cache Policy:
Essa recomendação possui algumas camadas. Primeiro, o que significa “cache”? Em resumo, é o processo pelo qual os navegadores salvam cópias das suas páginas para poderem carregá-las mais rapidamente em visitas futuras.
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 a própria Kinsta — ativam o cache via servidor. Na verdade, todos os nossos clientes podem habilitar o Edge Caching gratuitamente, um recurso que reduz em média mais de 50% o tempo necessário para entregar o HTML das páginas aos visitantes do site.
Certifique-se de verificar se esse é o caso do seu provedor antes de instalar um plugin de cache.
Depois de ativar o cache no seu site, você deve se preocupar com a eficiência da política de cache. Os navegadores limpam seus caches periodicamente para buscar cópias atualizadas dos arquivos.
O ideal é que esse período de expiração seja o maior possível. Se o navegador estiver limpando o cache do seu site a cada poucas horas, isso anula os benefícios da técnica. Para otimizar isso, use 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 esse trecho antes de #BEGIN WordPress ou depois de #END WordPress. Neste exemplo, o cache expira após 84.600 segundos.
Adicionando cabeçalhos Expires
Embora o Cache-Control seja o padrão atual, algumas ferramentas (como o GTMetrix) ainda verificam a presença 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.
Cache 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. Isso é provável para que, se forem feitas atualizações na plataforma, os usuários tenham acesso às mudanças rapidamente.
Esse script geralmente aparece na lista de recursos a ajustar sob a recomendação “Serve static assets with an efficient cache policy”. Como se trata de um recurso de terceiros, você não pode alterar a política de expiração usando Cache-Control ou Expires.
Se esse for o único script listado nessa recomendação, o teste ainda será aprovado:
No entanto, como mencionado anteriormente, a pontuação no PageSpeed importa menos do que a performance real percebida. Para servir esse recurso de forma mais eficiente, considere 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. Reduza o impacto de códigos de terceiros
Já discutimos várias formas como scripts de terceiros podem afetar negativamente o desempenho do seu site — resultando em falhas nas auditorias do PageSpeed Insights. O ideal é limitar sua dependência desses recursos sempre que possível.
No entanto, em alguns casos, usar um script externo é a melhor (ou única) solução. 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
Quando o uso de um script de terceiros for realmente necessário, é importante reduzir seu impacto no desempenho, como indicado pelo PageSpeed Insights:
Para carregar código de terceiros de forma mais eficiente, você pode considerar uma das técnicas que já mencionamos neste artigo:
-
Atrasar o carregamento de JavaScript (
defer) -
Usar tags
<link>com atributopreconnect -
Hospedar localmente scripts de terceiros (como o Google Analytics)
Estes métodos devem minimizar o impacto sobre o desempenho do seu site.
22. Evite cargas de rede excessivas
Essa recomendação é especialmente relevante para seus visitantes em dispositivos móveis. Cargas de rede muito grandes podem consumir mais dados para dispositivos móveis, gerando custos para os usuários. Reduzir o número de requisições necessárias para carregar suas páginas pode evitar isso:
O Google recomenda que o tamanho total em bytes da página seja de 1.600 KB ou menos. As técnicas mais comuns para atingir esse objetivo já foram abordadas neste artigo, incluindo:
-
Atrasar o carregamento de CSS, JavaScript e imagens abaixo da dobra
-
Minificar o código
-
Comprimir arquivos de imagem
-
Utilizar o formato WebP para imagens
-
Implementar cache
Siga os passos recomendados para essas estratégias e você conseguirá passar por essa auditoria sem esforço adicional.
23. Marcas e medições de tempo do usuário
Essa recomendação só se aplica caso você utilize a User Timing API. Essa ferramenta cria marcas de tempo que ajudam a avaliar o desempenho do seu JavaScript. Se a API estiver implementada no seu site, você verá as marcas e medições listadas nessa seção do PageSpeed Insights:
Como você pode ver, essa é mais uma sugestão do Google que não gera resultado de aprovação ou reprovação. O PageSpeed Insights apenas torna esses dados facilmente acessíveis para que você possa analisá-los e identificar áreas que possam precisar de otimização.
Se quiser incorporar a User Timing API no seu site WordPress, você pode aprender mais no guia da Mozilla sobre o tema.
24. Evite um DOM excessivamente grande
De forma simples, o DOM (Document Object Model) é como os navegadores transformam o HTML em objetos. Ele usa uma estrutura em árvore composta por nodes, cada um representando um objeto. Naturalmente, quanto maior o DOM da página, mais tempo ela levará para carregar.
Se a sua página excede certos padrões em relação ao tamanho DOM, o PageSpeed Insights recomendará reduzir o número de nodes e a complexidade da estilização em CSS:
Um dos culpados mais comuns por falhas nessa auditoria é o seu tema WordPress. Temas pesados frequentemente adicionam muitos elementos ao DOM e podem incluir estilos excessivamente complexos que prejudicam o desempenho. Se esse for o caso, pode ser necessário trocar de temas.
Resumo
O Google PageSpeed Insights deve fazer parte da sua caixa de ferramentas como webmaster. No entanto, ficar obcecado com a pontuação e tentar atingir os 100/100 a todo custo pode não ser o melhor uso do seu tempo. Isso pode acabar desviando sua atenção de outras tarefas importantes que trariam benefícios mais significativos.
Neste artigo, mostramos em que casos a pontuação do Google PageSpeed realmente importa — e quando não. Também compartilhamos diretrizes práticas para aplicar as recomendações da ferramenta e melhorar o desempenho do seu site.
Tem dúvidas sobre o Google PageSpeed Insights ou como otimizar o desempenho do seu site? Deixe sua pergunta na seção de comentários abaixo!
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.
