Como aproveitar o cache do navegador no WordPress (com vídeo)

Última atualização - 8 de julho de 2021

Se você possui ou administra um site WordPress, deve aprimorar constantemente a aparência e o funcionamento dele. No entanto, quanto mais plugins, construtores de páginas e elementos de conteúdo você usa, mais lento seu site fica.

E um site de carregamento lento é um grande desânimo para os visitantes, independentemente da aparência do site ou da importância do trabalho que ele desempenha.

É por isso que o gerenciamento de um site WordPress exige que você faça uso de toda e qualquer medida de desempenho do site que encontrar. E uma medida importante que vale a pena tomar é aproveitar o cache do navegador.

Neste artigo, você aprenderá o que isso significa e como você pode aproveitar o cache do navegador no WordPress.

O que é o cache do navegador?

Sempre que um usuário acessa seu site, recursos como imagens, JavaScript, CSS e outros precisam ser carregados no computador a partir do servidor. Isso significa que o usuário precisa carregar repetidamente os mesmos recursos entre páginas subsequentes e visitas ao site.

Digite: Cache.

O armazenamento em cache indica o período de tempo durante o qual os navegadores armazenam localmente os recursos em cache disponíveis no site. Quando um usuário solicita a página da Web, as informações são obtidas instantaneamente de seu computador.

Dessa forma, você pode aproveitar o cache do navegador no WordPress para fornecer um desempenho mais rápido do site.

Você pode usar ferramentas como Google PageSpeed ​​Insights e GTmetrix para testar se seu site já utiliza o cache do navegador.

Basta colar a URL do seu site no campo fornecido e clicar em “Analisar”. A ferramenta fornecerá ao seu site uma pontuação, entre 0 a 100 no caso do PageSpeed ​​e uma nota alfabética no caso do GTmetrix.

A ferramenta também fornecerá sugestões para melhorar o desempenho do seu site. Uma sugestão comum é optar por aproveitar o cache do navegador no WordPress. Se você receber essa sugestão, aqui estão duas maneiras de fazer isso.

Aproveite manualmente o cache do navegador no WordPress

Você pode alavancar manualmente o cache do navegador no WordPress adicionando um pouco de código ao arquivo .htaccess. Na verdade, você precisa adicionar três pedaços de código para três propósitos diferentes:

1. Adicionar cabeçalhos de expiração
2. Adicionar cabeçalhos de controle de cache
3. Desativar ETags

Para adicionar este código, você precisa acessar os arquivos do seu site, o que você pode fazer fazendo login na sua conta de hospedagem ou cPanel. Você precisa navegar até o gerenciador de arquivos e a opção “Ativar os arquivos ocultos” nas configurações do site.

Você então encontrará o arquivo .htaccess na pasta public_html. Clique com o botão direito do mouse no arquivo e edite-o para adicionar o código fornecido abaixo.

1. Adicione o código de cache do navegador

Copie o código abaixo e cole-o no final do conteúdo do arquivo .htaccess. Não faça outras alterações no arquivo.

 #Personalizar expira o início do cache - ajuste o período de acordo com suas necessidades
<IfModule mod_expires.c>
Tamanho do arquivo Etag MTime
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
Expira Ativo em
ExpiresByType text/html "acessar 600 segundos"
ExpiresByType application/xhtml+xml "acesso 600 segundos"
ExpiresByType texto/css "acesso 1 mês"
ExpiresByType texto/javascript "acesso 1 mês"
ExpiresByType text/x-javascript "acesso 1 mês"
ExpiresByType application/javascript "acesso 1 mês"
ExpiresByType application/x-javascript "acesso 1 mês"
Aplicação ExpiresByType/x-shockwave-flash "acesso 1 mês"
ExpiresByType application/pdf "acesso 1 mês"
ExpiresByType imagem/x-ícone "acesso 1 ano"
ExpiresByType image/jpg "acesso 1 ano"
ExpiresByType imagem/jpeg "acesso 1 ano"
ExpiresByType image/png "acesso 1 ano"
ExpiresByType image/gif "acesso 1 ano"
ExpiraDefault "acesso 1 mês"

</IfModule>
#Expira o fim do cache

O código acima diz ao navegador para servir uma versão em cache da página em vez de baixar uma nova versão.

As configurações também incluem os seguintes tempos de atualização/expiração:

• 600 segundos para HTML
• Um mês de CSS e JavaScript
• Um ano para imagens

Esses períodos de expiração garantem que os visitantes não precisem baixar determinados recursos com muita frequência. No entanto, você pode editar facilmente os tempos de expiração, se necessário.

2. Adicione cabeçalhos de controle de cache (Apache)

Precisamos adicionar cabeçalhos Cache Control para especificar as políticas de cache do navegador sobre como um recurso é armazenado em cache, onde ele é armazenado em cache e a idade máxima antes de expirar. No entanto, já especificamos os tempos de expiração acima, portanto, não precisamos repeti-los aqui.

Copie e cole o seguinte código:

 # BEGIN Cache-Control Headers

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Anexação de cabeçalho Cache-Control "público"
</filesMatch>
<filesMatch "\.(css)$">
Anexação de cabeçalho Cache-Control "público"
</filesMatch>
<filesMatch "\.(js)$">
Cabeçalho anexar Cache-Control "privado"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "privado, deve ser revalidado"
</filesMatch>
</IfModule>
</IfModule>

3. Desative as Etags

Desativaremos as tags eletrônicas para forçar os navegadores a confiar no controle de cache e expirar os cabeçalhos em vez de validar os arquivos. Aqui está o código:

 <IfModule mod_headers.c>
ETag de cabeçalho não definido
</IfModule>
FileETag Nenhum

Cache do navegador para servidor NGINX

Você não poderá localizar o arquivo .htaccess se seu site usar NGINX. Nesse caso, vá para /etc/nginx/sites-enabled/default e cole o código abaixo:

 servidor {
ouça 80;
server_name localhost;
local / {
root /usr/share/nginx/html;
índice índice.html índice.htm;
}
local ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expira 365d;
}
localização ~* \.(pdf)$ {
expira 30d;
}
}
Adicionar cabeçalhos de controle de cache (NGINX)
local ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expira 90d;
add_header Cache-Control "público, sem transformação";
}

Após editar o NGINX, salve o arquivo para aproveitar o cache do navegador no servidor NGINX.

Aproveite o cache do navegador no WordPress usando plugins

Editar o arquivo .htaccess pode ser bastante arriscado, pois um único erro pode quebrar todo o seu site. Então, se você não quer riscos desnecessários, você pode usar plugins como W3 Total Cache e WP Fastest Cache .

Veja como você pode aproveitar o cache do navegador usando o plug-in W3 Total Cache, um dos melhores para o trabalho.

Depois de instalar o plugin, vá para sua página de configurações. Aqui, verifique se o Cache do navegador está ativado. Em seguida, vá para as configurações de cache do navegador na barra lateral. E certifique-se de que o cabeçalho expires, o cabeçalho de controle de cache e as opções set e-tag estejam ativados.

Salve as configurações se você fez alguma alteração.

Com isso, você aproveitou com sucesso o cache do navegador em seu site WordPress. Você pode certificar-se de que está habilitado usando a ferramenta Insights ou GTmetrix novamente.

Se preferir uma versão em vídeo, confira o vídeo abaixo:

Leitura adicional:

• Melhores plugins gratuitos de otimização de banco de dados WordPress em 2021
• Como ativar a compactação GZIP no site WordPress?