Aproveite o cache do navegador no WordPress para otimizar o tempo de carregamento da página

Os usuários do site WordPress estão sempre em busca de algo pronto para usar e, com o objetivo de alcançar o benchmark de pontuação do Google PageSpeed ​​Insights com mais de 90 pontos, é bem possível. Geralmente, existem várias técnicas para acelerar sites WordPress, mas entre todas, o cache do navegador é o problema mais comumente encontrado durante a análise de otimização de velocidade do site.

Para monitorar e testar o desempenho do seu site, você pode usar várias ferramentas online, como Google PageSpeed ​​Insights, GTMetrix e Pingdom. Eles fornecem resultados precisos e ajudam você a entender onde seu site precisa de melhorias. Ao testar o desempenho do site, você pode ter recebido uma notificação de aviso de “Leverage Browser Caching”.

Hoje, vamos discutir como você pode resolver esse problema. Portanto, não vamos perder tempo e nos aprofundar.

O que é um cache de navegador e como funciona?

Sempre que uma pessoa visita seu site, o navegador envia uma solicitação para carregar ativos como HTML, Scripts, Imagens, CSS, etc. do servidor. O servidor então responde à solicitação do navegador. Dependendo do tamanho do ativo solicitado e do tempo de processo do servidor, a resposta pode demorar um pouco para ser respondida. Em última análise, isso resulta em aumento de carga no servidor e torna o site mais lento para o usuário.

Nessa situação, o cache do navegador funciona melhor. Ele armazena conteúdo estático no navegador do usuário, na primeira vez que um visitante visita um site. Se o seu site não estiver configurado corretamente com o cache do navegador e você estiver testando a velocidade do seu site usando qualquer uma das ferramentas de teste de desempenho mencionadas acima, a ferramenta definitivamente mostrará uma mensagem de aviso para alavancar o cache do navegador.

De acordo com o Google, a resposta do servidor deve incluir duas tags abaixo no cabeçalho:

Cache-Control define como e por quanto tempo a resposta individual pode ser armazenada em cache pelo navegador e outros caches intermediários.

ETag fornece um token de revalidação que é enviado automaticamente pelo navegador para verificar se o recurso foi alterado desde a última vez que foi solicitado.

O que é aproveitar o cache do navegador?

Em palavras simples, o uso do cache do navegador ajuda a reduzir as solicitações HTTP para carregar páginas mais rapidamente e também melhora o tempo de resposta do servidor.

Vamos dar uma olhada em um exemplo ao vivo. Testei meu site usando o Think with Google e aqui está o resultado.

Vamos testá-lo na ferramenta Google PageSpeed ​​Insights.

Ok, então, você pode ver que o desempenho geral do meu site é muito bom. Mas, há espaço para melhorá-lo. Isso está mostrando que meus URLs internos podem ser armazenados em cache.

Corrigir o aviso de “aproveitar o cache do navegador”

Para corrigir o aviso “Leverage Browser Caching”, você terá que realizar as duas etapas a seguir.

1. Alterar cabeçalhos de solicitação para usar cache
2. Otimize a política de cache

1. Alterar Cabeçalhos de Solicitação para Usar Cache

Uma maneira de melhorar a velocidade e a resposta do seu site é alterar os cabeçalhos de solicitação para usar o cache. Vamos adicionar algumas linhas de código ao nosso arquivo .htaccess do WordPress.

Nota: .htaccess é a sala de controle de um site. Se não for configurado corretamente, pode quebrar todo o site enquanto você estiver nele! Aprenda como proteger seu WordPress com arquivo .htaccess .

Para aproveitar o cache do navegador no WordPress, acesse o diretório principal da instalação do WordPress, procure o arquivo .htaccess e abra-o com qualquer editor de código. Simplesmente, cole as linhas indicadas abaixo no topo do arquivo .htaccess do WordPress.

 ## EXPIRA CACHING ##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image / jpg "acesso 1 ano"
ExpiresByType image / jpeg "acesso 1 ano"
ExpiresByType image / gif "acesso 1 ano"
ExpiresByType image / png "acesso 1 ano"
ExpiresByType text / css "acesso 1 mês"
ExpiresByType text / html "acesso 1 mês"
ExpiresByType application / pdf "access 1 month"
ExpiresByType text / x-javascript "acesso 1 mês"
ExpiresByType application / x-shockwave-flash "acesso 1 mês"
ExpiresByType image / x-icon "acesso 1 ano"
ExpiresDefault "acesso 1 mês"

</IfModule>

## EXPIRA CACHING ##

2. Otimize a Política de Cache

A segunda etapa para acelerar o tempo de resposta em seu site é otimizar a política de cache. O código acima descreve os tipos de arquivo e suas datas de validade. Depende totalmente de você decidir quanto tempo deseja armazenar conteúdo estático específico no cache do navegador do usuário. Se o seu conteúdo estático, como imagens, for de longo prazo. Eu sugeriria que você os definisse por um ano. No entanto, o conteúdo que você suspeita que pode ser alterado em um futuro próximo, sugere-se que você defina a data de validade para pelo menos um mês.

Cache-Controls

Se o método acima não funcionar em seu servidor, temos outra alternativa que pode ajudá-lo com controles de cache para definir a expiração do cache. Tudo que você precisa fazer é copiar e colar as seguintes linhas no topo do seu arquivo .htaccess.

 Nº 1 mês para a maioria dos ativos estáticos

<filesMatch ". (css | jpg | jpeg | png | gif | js | ico) $">
Cabeçalho definido Cache-Control "max-age = 2592000, público"

</filesMatch>

Da mesma forma que na etapa anterior, o código acima descreve a política de expiração e armazenamento em cache de diferentes tipos de arquivo.

Nota: Este é o valor mínimo que pode eliminar o aviso. Se o prazo de validade for menor do que isso, você ainda poderá ver o aviso do navegador de alavancagem, sugerindo aumentar o prazo de validade.

Depois de configurar o arquivo .htaccess corretamente, vamos agora testá-lo. Então, vamos testar!

E o aviso “aproveitar o cache do navegador” foi corrigido.

WordPress Aproveite o cache do navegador para o Google Analytics

Se você estiver usando qualquer plugin do WordPress para o Google Analytics, ainda poderá obter um aviso de aproveitamento do cache do navegador, não importa se você configurou tudo corretamente.

É porque o Google Analytics definiu o tempo de expiração padrão para apenas duas horas para garantir que você receba atualizações o mais rápido possível.

Existem duas maneiras de corrigir o aviso de cache do navegador para o Google Analytics.

1. Local : você pode criar uma cópia local de analytics.js e / ou ga.js (qualquer arquivo com o qual você está lidando, aproveita o cache do navegador). Observe que o Google não recomenda esse método.
2. Plug - in : use o plugin do WordPress Complete Analytics Optimization Suite (CAOS) que hospeda seu arquivo do Google Analytics localmente e use wp_cron () para mantê-lo atualizado.

Ainda está vendo o aviso de aproveitamento do cache do navegador?

Depois de configurar tudo corretamente, você ainda pode ver o Google sugerindo para aproveitar o cache do navegador, como na imagem abaixo.

Como você pode ver, os arquivos acima são integrações de terceiros. Eles não estão presentes em nosso servidor. Não há nada que possamos fazer com eles, exceto excluí-los. Todas as integrações de terceiros podem causar este aviso nas ferramentas de teste de velocidade.

Sou um cliente Cloudways, o que isso traz para mim?

Se você é um cliente de hospedagem WordPress otimizado para Cloudways, deve deixar de lado suas preocupações sobre o alerta de cache do navegador do WordPress que aparece nas ferramentas de teste de velocidade online. Porque a Cloudways lida com esse problema sozinha. Você pode alterar o tempo de expiração simplesmente navegando até Servidor → Configurações e Pacotes → Avançado , role um pouco para baixo e procure por NGINX - Expiração de Cache Estático . O valor padrão é 43200 min, o que equivale a 30 dias.

Aproveite o cache do navegador com W3 Total Cache

O método mencionado acima é a maneira manual de remover o aviso de cache do navegador de alavancagem. Se você estiver usando um plugin de cache como W3 Total Cache , você precisa habilitar o cache do navegador navegando até Desempenho → Configurações Gerais .

Em seguida, navegue até Cache do navegador e marque as cinco caixas de seleção abaixo.

Role um pouco para baixo para definir o tempo de expiração dos arquivos CSS e JSS. O valor padrão é 31536000 que equivale a 365 dias. Você pode alterar isso para o período de tempo necessário.

Role um pouco mais para baixo para definir um tempo de expiração para HTML e XML.

Para alterar os valores padrão de Mídia e outros arquivos, role um pouco para baixo e defina a expiração. O valor padrão é 31536000, que equivale a 365 dias.

Pensamentos finais

Aproveitar o cache do navegador ajuda a melhorar a pontuação do teste de desempenho da web. Lembre-se de que essas configurações são apenas para a construção de diretrizes básicas e compreensão entre os usuários do WordPress. Além disso, existem várias técnicas que podem ajudar as pessoas a alcançarem um site mais rápido em pouco tempo, sendo que a mais importante é escolher a hospedagem WordPress mais rápida.

Se você tiver alguma dúvida, fique à vontade para perguntar na seção de comentários abaixo. Eu adoraria responder.