Se você já correu o seu site WordPress Google PageSpeed Insights ou Pingdom, então provavelmente já viu esse grande aviso amarelo falando Leverage Browser Caching – em português, Aproveite o cache do navegador. E deve ser por isso que chegou até esse artigo. Hoje aprofundaremos o que esse aviso significa, como ele afeta você e quais as opções para o seu site WordPress.

O que é o Aviso Leverage Browser Caching?

O aviso leverage browser caching, como exibido no screenshot abaixo, diz respeito ao cache do seu navegador. Sempre que você visita um site, ele baixa ativos como HTML, CSS, JavaScript e imagens diretamente para o cache local do navegador. Assim, não é necessário ficar recarregando esses elementos sempre que entra na página. O aviso surge quando seu servidor web, ou um servidor de terceiros, não implementou os cabeçalhos corretos de cache HTTP. Ou então os cabeçalhos podem até existir, mas o tempo de cache é muito curto.

Definir uma data de expiração ou idade nos cabeçalhos HTTP

Definir uma data de expiração ou idade nos cabeçalhos HTTP

Também poderá encontrar esse artigo no novo teste de velocidade do website “think with Google”, que é baseado no Google PageSpeed ​​Insights. Isso foi desenhado para ser uma ferramenta de marketing do Google, mas fez com que muitos clientes simplesmente encaminhassem esses erros para seus webmasters. Obrigando os desenvolvedores e designers do WordPress a terem de descobrir um rápido conserto para acalmarem seus clientes.

teste de velocidade think with Google

teste de velocidade think with Google

Tendo em consideração que estamos falando sobre o Google Pagespeed Insights, confira esse guia detalhado ->   Como pontuar 100/100 no Google PageSpeed Insights com o WordPress

Corrigir o Aviso Leverage Browser Caching no WordPress

Quando é necessário corrigir o aviso leverage browser caching, existem vários cenários diferentes que geralmente são encontrados pelos usuários do WordPress. O mais comum obviamente é uma configuração incorreta do seu servidor web. A segunda ironia é que o script do Google Analytic nos dá o aviso. E o terceiro é quando outros scripts de terceiros retornam esse aviso. Veja as suas opções abaixo.

1. Leverage Browser Caching no Servidor

A primeira razão, e também a mais comum, pela qual o aviso leverage browser caching é acionado, acontece quando o seu servidor web não tem os cabeçalhos apropriados no lugar correto. No screenshot abaixo, no Google PageSpeed ​​Insights, verá que o motivo é uma expiração não especificada. Quando o assunto é caching, existem dois métodos principais que são usados, cabeçalhos Cache-Control e Cabeçalhos Expires. Enquanto o cabeçalho Cache-Control ativa o cache do cliente e define a duração máxima de um recurso, o cabeçalho Expires é usado para especificar um ponto específico no tempo em que o recurso deixa de ser válido.

Aviso leverage browser caching no Google PageSpeed Insights

Aviso leverage browser caching no Google PageSpeed Insights

Exploremos agora como como adicionar esses cabeçalhos ao seu servidor web. Nota: Você não precisa realmente de adicionar os dois cabeçalhos, já que isso é um pouco redundante. O Cache-Control é mais recente e normalmente o método recomendado, mas algumas ferramentas de desempenho web, como a GTmetrix, continuam verificando os cabeçalhos Expires. Todos esses são exemplos, você pode alterar os tipos de arquivo, tempos de expiração, etc. com base em suas necessidades.

Importante! Editar a sua configuração Nginx ou arquivo .htaccess Apache poderá afetar o seu site se não for executado corretamente. Se não estiver confortável fazendo isso, por favor contate seu host ou desenvolvedor.

Adicionando um Cabeçalho Cache-Control no Nginx

Você pode adicionar cabeçalhos Cache-Control no Nginx ao adicionar o seguinte à localização ou bloco de servidor na configuração do seu servidor.

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

O que é exatamente o código acima? De forma sucinta, eles dizem ao servidor que os tipos de arquivo não serão alterados durante pelo menos um mês. Então, em vez de baixar os recursos recorrentemente, ele faz o armazenamento no cache do seu computador. Isso aumenta a velocidade para os visitantes que retornam ao website.

Adicionando Cabeçalhos Expires no Nginx

Você pode adicionar cabeçalhos Expires no Nginx ao adicionar o seguinte ao seu bloco de servidor. Nesse exemplo, você pode especificar tempos de expiração diferentes com base nos tipos de arquivo.

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

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

Adicionando Cabeçalhos Cache-Control no Apache

Você pode adicionar cabeçalhos Cache-Control no Apache ao adicionar o seguinte ao seu arquivo .htaccess. Pedaços de código podem ser adicionados na parte superior ou inferior do arquivo (antes de # BEGIN WordPress ou depois de # END WordPress).

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

Adicionando Cabeçalhos Expires no Apache

Você pode adicionar Cabeçalhos Expires no Apache adicionando o seguinte ao seu arquivo .htaccess.

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType 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"

## EXPIRES HEADER CACHING ##

Se você é um cliente Kinsta, não precisa de se preocupar em adicionar esses cabeçalhos. Todos os nossos servidores Nginx já incluem isso. E tenha em consideração que, se você usar um serviço CDN como o KeyCDN, esses cabeçalhos provavelmente já estão sendo definidos para os seus ativos.

Você pode verificar seus cabeçalhos no painel de rede do Chrome DevTools ou simplesmente pode reexecutar seu site do WordPress no Google PageSpeed ​​Insights para garantir que o aviso desapareceu.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos
Cabeçalhos de cache de HTTP

Cabeçalhos de cache de HTTP

2. Leverage Browser Caching e o Google Analytics

O segundo leverage browser caching mais comum é mostrado pelo Google Analytics. Isso é algo bem irônico, já que esse script é do próprio Google. A questão é que eles definem um tempo baixo de cache de 2 horas para seus ativos, como mostrado no screenshot abaixo. Eles provavelmente fazem isso porque, caso alterem algo, querem que todos os usuários implementem essas alterações o mais rápido possível. Contudo, existe uma forma de contornar isso, que é hospedar o script do Google Analytics no seu próprio servidor. Por favor saiba que isso é não suportado pelo Google.

Cache do Google Analytics

Cache do Google Analytics

Existe um ótimo e pequeno plugin chamado Complete Analytics Optimization Suite, criado e desenvolvido por Daan van den Bergh, que permite hospedar o Google Analytics localmente no seu site WordPress.

Plugin CAOS 

Plugin CAOS

Você pode baixar o Complete Analytics Optimization Suite do repositório WordPress ou pode procurar por ele em “Adicionar Novo” no seu painel WordPress. O plugin permite hospedar localmente seu arquivo JavaScript do Google Analytics (analytics.js), mantendo ele atualizado usando o wp_cron().

Outros recursos incluem a capacidade de anonimizar facilmente o endereço IP de seus visitantes, definir uma taxa de rejeição ajustada e o posicionamento do script (cabeçalho ou rodapé).

Existem também outras vantagens adicionais quando hospeda seu script de análise localmente, entre elas uma redução de suas solicitações HTTP externas para o Google de 2 para 1, passando a ter total controle sobre o cache do arquivo. Isso significa que você pode utilizar os cabeçalhos de cache como mostrámos acima.

Configurações de análise hospedadas localmente

Configurações de análise hospedadas localmente

3. E os Scripts de Terceiros?

Se você está executando uma empresa em seu site WordPress, provavelmente tem scritps de terceiros correndo para rastrear conversões, testes A/B, etc. Isso pode incluir scripts como pixels de conversão do Facebook, Twitter, CrazyEgg, Hotjar, etc. Infelizmente, como você não pode hospedá-los localmente, não há nada que possa ser feito, já que não tem controle sobre o armazenamento em cache desses recursos de terceiros. Mas, para muitos sites e blogueiros de menores dimensões, você pode eliminar esse aviso leverage browser caching seguindo as recomendações acima.

Aviso leverage browser caching em scripts de terceiros

Aviso leverage browser caching em scripts de terceiros

Resumo

Você tem várias opções disponíveis para tentar corrigir o irritante aviso leverage browser caching no seu site WordPress. Para a maioria das pessoas, essas opções permitirão acabar com o problema. Lembre-se de que essas ferramentas de desempenho web devem ser usadas como diretrizes. Não recomendamos ficar demasiado obcecado com as pontuações. Mas corrigir os avisos resultará provavelmente em um site WordPress mais rápido.

Você tem mais dicas sobre como corrigir o aviso leverage browser caching? Se sim, fique à vontade para nos deixar um comentário abaixo.

38
Shares