O Google PageSpeed Insights é uma das várias ferramentas úteis para medir o desempenho do site. No entanto, algumas das suas sugestões – como o aviso ‘Leverage Browser Caching’ – podem ser confusas para proprietários de sites inexperientes.
Quando a deciframos, não é assim tão difícil de entender. Com alguns ajustes, você pode implementar esta melhor prática de desenvolvimento no seu site para reduzir os tempos de carregamento e melhorar a sua pontuação no PageSpeed.
Neste artigo, vamos começar com uma introdução ao aviso ‘Leverage Browser Caching’. Depois, compartilharemos várias dicas para corrigir este problema no seu site WordPress.
Vamos nessa!
Prefere assistir à versão em vídeo?
O que é o Aviso “Leverage Browser Caching”?
Para entender o aviso “Leverage Browser Caching”, ajuda saber um pouco sobre o Google PageSpeed Insights. Se você é novo na plataforma, recomendamos que leia nosso guia completo, Google PageSpeed Insights: Pontuação 100/100 com WordPress.
O aviso “Leverage Browser Caching” é um dos muitos ‘diagnósticos’ do Google PageSpeed usado para retornar como uma sugestão para melhorar sua pontuação, como o seguinte:
Na Versão 5 do Google PageSpeed Insights, esta mensagem foi substituída pelo aviso “Disponibilize recursos estáticos com uma política de cache eficiente”:
Apesar da mudança na linguagem e aparência, a solução para estes avisos é a mesma.
O Google sugere o uso do cache do navegador para reduzir os tempos de carregamento de páginas e melhorar o desempenho. Em resumo, o cache é quando os navegadores dos usuários salvam cópias estáticas das páginas do seu site. Então, em visitas subsequentes, esse conteúdo pode ser carregado novamente mais rapidamente porque o navegador não precisa entrar em contato com o servidor do seu site para acessar os recursos solicitados.
Contudo, cada recurso em cache precisa de um período de expiração especificado. Isso informa aos navegadores quando o conteúdo do seu site está desatualizado, para que ele possa substituir sua cópia em cache por uma versão atualizada.
Se você estiver vendo o aviso “Leverage Browser Caching” nos resultados do seu teste de desempenho, isso provavelmente significa uma de duas coisas:
- Os cabeçalhos Cache-Control ou Expires estão ausentes do servidor do seu site ou de terceiros.
- Os cabeçalhos necessários estão presentes, mas o período de validade é muito curto e, portanto, não tem muito impacto no desempenho.
As soluções para este aviso envolvem a resolução de um ou ambos os problemas.
Como corrigir o Aviso “Leverage Browser Caching” no WordPress (3 Métodos)
Existem algumas maneiras diferentes de corrigir o aviso Leverage Browser Caching no WordPress, dependendo do que o está causando. Aqui estão três soluções que você pode tentar.
1. Adicionar Cache-Control e Expires Headers
Há dois cabeçalhos relacionados ao cache do navegador: Cache-Control e Expires. Pelo menos um deve estar presente para ativar o cache do navegador para o seu site, pois é assim que os navegadores determinam quanto tempo devem reter os recursos antes de atualizá-los.
Uma maneira simples de determinar se isto é o que está causando o aviso de Leverage Browser Caching é olhar para os detalhes de dados para cada recurso. No Google PageSpeed Insights Version 5, você verá “Nenhum” listado em Cache TTL:
Como uma referência útil, as versões anteriores do Google PageSpeed Insights mostraram uma mensagem de “expiração não especificada” quando os cabeçalhos estavam ausentes:
Enquanto o cabeçalho Cache-Control ativa o cache do lado do cliente e define a idade máxima de um recurso, o cabeçalho expirados é usado para especificar um ponto no tempo em que o recurso não é mais válido.
Você não precisa necessariamente adicionar ambos, pois isso pode ser redundante. O Cache-Control é mais recente e é geralmente o método recomendado. No entanto, algumas ferramentas de desempenho web, como o GTmetrix, ainda verificam se há cabeçalhos expirados.
Se você está hospedado na Kinsta, não precisa se preocupar em colocar estes cabeçalhos. Todos os nossos servidores Nginx já os incluem. Aqueles que utilizam uma Rede de Entrega de Conteúdo (CDN) também já devem ter estes cabeçalhos aplicados.
No caso de você estar usando um provedor de hospedagem diferente, certifique-se de fazer backup do seu site antes de seguir os passos abaixo, pois a edição . htaccess pode quebrar o seu site se você não tiver cuidado.
Como adicionar cabeçalhos Cache-Control no Nginx
Para adicionar cabeçalhos Cache-Control no Nginx, você pode adicionar o seguinte ao arquivo de configuração do seu servidor:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Isto diz ao seu servidor que os tipos de ficheiros especificados não vão mudar durante pelo menos 30 dias. Ele manterá os arquivos relevantes salvos por esse período de tempo antes de atualizá-los.
Como adicionar cabeçalhos Cache-Control no Apache
Se você tiver um servidor Apache, você pode adicionar o seguinte código ao seu arquivo . htaccess:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Este trecho deve ser adicionado antes de “#BEGIN WordPress” ou depois de “#END WordPress”. Neste caso, a cache é definida para expirar após 84.600 segundos.
Como Adicionar Cabeçalhos Expirados em Nginx
Você pode adicionar cabeçalhos expirados no Nginx, adicionando o seguinte ao seu bloco de servidores. Neste exemplo, você pode ver como especificar diferentes tempos de expiração com base em tipos de arquivo:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Como Adicionar Cabeçalhos Expirados no Apache
Você pode adicionar cabeçalhos expirados no Apache, adicionando o seguinte 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 ##Em seguida, você pode verificar seus cabeçalhos executando seu site através do Google PageSpeed Insights novamente e ver se o aviso persiste.
2. Leverage Browser Caching no Google Analytics
Ironicamente, o Google Analytics é, por vezes, a causa do aviso Leverage Browser Caching (Aproveitar o processo de cache do navegador) e de uma pontuação imperfeita no PageSpeed. Isto porque tem um tempo de expiração de cache baixo, de apenas duas horas. Este costumava ser o antigo aviso:
Na PageSpeed Insights Version 5, esta edição não resulta mais em um aviso, mas o Google Analytics ainda pode ser listado como um recurso não otimizado:
Você não poderá mudar isso com os cabeçalhos Cache-Control ou Expires porque o recurso não está no seu servidor. No entanto, há uma forma de aproveitar o cache do navegador para o Google Analytics, hospedando o script localmente.
No entanto, esteja ciente de que este método não é suportado pelo Google.
Leverage Browser Caching no Google Analytics com o Complete Analytics Optimization Suite (CAOS)
Se você quiser resolver o problema acima, há um plugin gratuito chamado Complete Analytics Optimization Suite (CAOS) desenvolvido por Daan van den Bergh que você pode usar:
Você pode fazer o download do CAOS no Diretório de Plugins do WordPress ou procurando por ele em Plugins > Adicionar novo no seu painel de controle do WordPress.
Alguns benefícios adicionais ao hospedar seu script analítico localmente incluem que ele reduz seus pedidos HTTP externos ao Google de dois para um e permite que você ganhe controle total sobre o cache do arquivo. Isto significa que você pode usar os cabeçalhos de cache como nós mostramos anteriormente.
Para começar, instale o plugin e, em seguida, digite seu ID de rastreamento do Google Analytics. O plugin adiciona o código de rastreamento necessário para o Google Analytics ao seu site WordPress, baixa e salva o arquivo analytics.js no seu servidor, e o mantém atualizado usando um script agendado em wp_cron().
Recomendamos também a sua colocação no rodapé:
Tenha em mente que o CAOS não funcionará com outros plugins WordPress do Google Analytics.
Leverage Browser Caching no Google Analytics com o WP-Rocket
Alternativamente, você pode usar o plugin de cache do WordPress WP-Rocket para atingir o mesmo objetivo:
Este plugin do Google Tracking Add-on permite que você hospede seu script analítico localmente com o clique de um botão. Basta alternar o status em WP-Rocket > Add-ons.
O WP-Rocket e seu add-on são compatíveis com outros plugins do Google Analytics. Como uma ferramenta premium, ele vem a um preço com licenças que começam em $49 por ano.
3. Minimize o seu uso de scripts de terceiros
Por vezes, o script do Google Analytics pode causar problemas na sua pontuação no Google PageSpeed Insights porque está alojado no servidor do Google, pelo que não tem o controle da cache.
O mesmo se aplica a outros scripts de terceiros. Se você está gerenciando um negócio através do seu site WordPress, muito provavelmente você tem outros scripts de terceiros rodando para acompanhar conversões, testes A/B, e muito mais.
Isso pode incluir scripts como o Facebook, Crazy Egg, Hotjar, entre outros. Infelizmente, a menos que você encontre uma maneira de hospedar esses scripts localmente, não há muito que você possa fazer para ganhar controle sobre eles.
Uma opção para usuários do Facebook Pixel é usar mais um WP-Rocket add-on. Idealmente, você vai querer minimizar o uso de scripts de terceiros se quiser melhorar sua pontuação no Google PageSpeed. Portanto, pode valer a pena realizar uma auditoria do seu site e remover quaisquer scripts que não sejam necessários para executá-lo.
Resumo
Embora não seja uma medida definitiva do desempenho do seu site, o Google PageSpeed Insights ainda é um indicador decente de como ele está funcionando. Melhorar a sua pontuação através da resolução de avisos mostrados na seção “Servir ativos estáticos com uma política de cache eficiente” pode ajudar a tornar o seu site mais rápido e mais utilizável para os visitantes.
Se você estiver vendo este aviso no Google PageSpeed Insights, você pode resolvê-lo por:
- Adicionando cabeçalhos Cache-Control ou Expires.
- Alavancando o cache do navegador para o Google Analytics.
- Minimizando o uso de scripts de terceiros.
Tem alguma outra dica sobre como resolver o Leverage Browser Caching? Informe-nos na seção de comentários abaixo!
Jon é o Diretor de Operações na Kinsta e está envolvido diariamente com as equipes de vendas, atendimento ao cliente e suporte técnico da Kinsta. Jon é um homem de família. Então, quando não está digitando freneticamente no laptop, geralmente está ajudando um de seus filhos a consertar uma bicicleta ou configurando a Netflix para uma criança impaciente.
Deixe um comentário