Como resolver o aviso “Leverage Browser Caching” no WordPres

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 post, 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.

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 “Servir bens 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 do 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

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.

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 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 Expires é 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 Expires.

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"

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

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:

  1. Adicionar cabeçalhos Cache-Control ou Expires.
  2. Alavancando o cache do navegador para o Google Analytics.
  3. Minimizando o uso de scripts de terceiros.

Categorias: TUTORIAIS

Categorias

Deixe uma avaliação

×