Como resolver o aviso “Leverage Browser Caching” no WordPres

por Drope em TUTORIAIS on 01/04/2020

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.

Categories: TUTORIAIS

Tags:

SEJA NOSSO AFILIADO E RECEBA 50% DE COMISSÃO

Você ganhará 50% de comissão em qualquer venda que fizer de algum dos nossos planos e também ganhará 30% de recorrência por cada nova mensalidade paga.

Agora você pode sugerir qualquer produto de WordPress da Envato Elements. Para acessar a Envato e buscar por um produto que não esteja em nosso repositório, clique aqui.

Leave this field blank

Como importar template no Elementor

Você pode importar modelos que exportou ou baixou.

    1. Acesse seu painel do WordPress
    2. Clique na opção Modelos, localizado no menu lateral
    3. Clique no botão Importar Modelos
    4. Escolha o arquivo que deseja importar e clique no botão Importar agora
    5. Seu modelo importado agora será exibido na sua lista de modelos

Como atualizar um plugin ou tema

Recomendamos que você instale o plugin Easy Theme and Plugin Upgrades. Você pode baixá-lo gratuitamente clicando aqui.

Para usá-lo, primeiro instale e ative o plug-in. Uma vez ativado, você poderá atualizar qualquer tema/plugin simplesmente carregando o arquivo do plugin atualizado para o seu site.

Atualizando um plugin

  • Faça o download do arquivo .zip mais recente para o plugin.
  • Entre no seu site WordPress.
  • Vá para “Plugins” > “Adicionar novo”. (Mesmo que você esteja atualizando)
  • Clique no botão “Upload Plugin” na parte superior da página.
  • Selecione o arquivo .zip com a versão atualizada do plug-in.
  • Clique no botão “Instalar agora”.

Atualizando um tema

  • Faça o download do arquivo .zip mais recente para o tema.
  • Entre no seu site WordPress.
  • Vá para “Aparência”> “Temas”.
  • Clique no botão “Adicionar novo” na parte superior da página. (Mesmo que você esteja atualizando)
  • Clique no botão “Carregar tema” na parte superior da página.
  • Selecione o arquivo .zip com a versão atualizada do tema.
  • Clique no botão “Instalar agora”.

Problemas comuns

Normalmente, quando se faz download de um tema, o mesmo vem com diversos outros arquivos e o tema na verdade vem dentro de alguma outra pasta do zip.

Basta somente o usuário extrair o arquivo primeiramente no computador dele e após isso enviar o arquivo correto para o wordpress.

O erro é ocasionado pelo mesmo motivo do primeiro erro, para solucionar basta somente o usuário extrair o arquivo primeiramente no computador dele e após isso enviar o arquivo correto para o wordpress.

Recomendações

Recomendamos sempre aos nossos clientes estarem com uma versão nova do PHP, por exemplo: 7.4.

Se você não souber como ver em qual versão você está, basta entrar em contato com o suporte do seu servidor de hospedagem e pedir pra eles fazerem a alteração.