Você acabou de utilizar uma ferramenta de teste de velocidade para o seu site WordPress e se deparou com a mensagem de que você precisa Adicionar “Expires headers” (cabeçalhos expirados) ao seu site WordPress?
Os “Expires headers” (cabeçalhos expirados) ajudam a alavancar o cache do navegador, o que lhe permite acelerar o tempo de carregamento do seu site. Além disso, eles também fazem parte das recomendações de desempenho da YSlow, o que significa que afetarão sua “pontuação” de desempenho em ferramentas como GTmetrix.
Neste artigo, explicaremos o que são “Expires headers” (cabeçalhos expirados) e como eles afetam seu site. Em seguida, mostraremos passo a passo como adicionar cabeçalhos expirados no WordPress usando alguns métodos diferentes.
Mas primeiro, precisamos fazer um desvio rápido para cobrir outro tópico – o cache do navegador.
O que é Browser Caching?
Antes de podermos falar sobre “Expires headers” (cabeçalhos expirados) , precisamos primeiro introduzi-lo ao conceito de cache do navegador. Isto é importante porque os “Expires headers” (cabeçalhos expirados) ajudam a controlar e implementar o cache do navegador – portanto, se você não entende o cache do navegador, você não pode entender os “Expires headers” (cabeçalhos expirados) .
Em resumo, o cache do navegador permite que seu site diga ao navegador de um visitante para salvar certos arquivos no computador local do visitante e carregar esses arquivos locais para visitas subseqüentes, em vez de baixá-los do seu servidor em cada carregamento de página.
Ao eliminar a necessidade de baixar o arquivo cada vez, você pode acelerar o tempo de carregamento do seu site e reduzir o uso da largura de banda.
Vejamos um exemplo – a imagem do logotipo do seu site. Seu logotipo é o mesmo em todas as páginas, portanto não faz sentido forçar os navegadores dos visitantes a recarregar o mesmo arquivo de logotipo em cada carregamento de página. Com o cache do navegador, você poderia armazenar o arquivo do logotipo nos computadores locais dos visitantes. Um visitante ainda precisaria baixar sua imagem do logotipo em sua primeira visita. Mas para visualizações de páginas posteriores, o arquivo seria carregado a partir do cache do seu navegador local.
O que são Expires headers (cabeçalhos expirados) ?
Os Expires headers (cabeçalhos expirados) permitem dizer ao visitante se ele deve carregar um determinado recurso do cache do navegador local (como discutimos acima) ou se ele precisa baixar uma nova versão do servidor web.
Mais especificamente, ele permite definir uma duração para a versão em cache de diferentes tipos de arquivo antes que esse arquivo “expire” e o navegador deve baixá-lo novamente do servidor.
Vejamos um exemplo…
Digamos que você queira controlar o comportamento de cache do navegador para arquivos de imagem PNG em seu site. Se você definir os cabeçalhos expirados para arquivos PNG iguais a um mês, isto significa que o navegador de um visitante o fará:
- Carregar a versão já descarregada do cache por um mês após o acesso/download inicial.
- Faça novamente o download desse arquivo do servidor após um mês.
Você pode definir diferentes cabeçalhos expirados para diferentes tipos de arquivos, o que lhe dá controle granular sobre o cache do navegador do seu site.
Expires headers (cabeçalhos expirados) vs Cache-control
Embora usar Expires headers (cabeçalhos expirados) seja uma maneira de controlar o cache do navegador no WordPress, não é a única maneira. Há também outra técnica chamada de Cache-control.
O Cache-control é uma técnica mais moderna e oferece um pouco mais de flexibilidade para controlar o comportamento de cache. Por essa razão, muitos sites utilizam o cache-control – incluindo nós aqui em Kinsta com nossa configuração Nginx personalizada.
No entanto, os Expires headers (cabeçalhos expirados) ainda oferecem tudo o que a maioria dos sites precisa, por isso são uma ótima opção para usar no cache do navegador. Você também pode usar ambos, embora seus cabeçalhos de Cache-control tenham precedência na maioria das situações. Se usar ambos, você vai querer ter certeza de que definirá os mesmos valores de tempo em cada um deles.
Se você quiser saber mais sobre como implementar o cache-control no WordPress, confira nosso guia sobre como aproveitar o cache do navegador no WordPress.
Como corrigir a mensagem “Adicionar Expires headers (cabeçalhos expirados)” no WordPress
Agora, vamos entrar na parte real de como fazer e mostraremos a você como configurar Expires headers (cabeçalhos expirados) no WordPress.
Mas primeiro – temos boas notícias. Se você está hospedado em Kinsta, não precisa se preocupar com a instalação de Expires headers (cabeçalhos expirados), pois nós o fazemos automaticamente para você. Nós pré-configuramos tanto nossos servidores quanto nossa rede integrada de entrega de conteúdo (CDN) para aproveitar o cache do navegador, para que você não precise fazer nada.
Se você estiver hospedando em outro lugar, você pode adicionar cabeçalhos expirados para seu site WordPress. Você pode fazer isso usando seu próprio trecho de código no nível do servidor (Nginx ou Apache) ou através de alguns plugins WordPress de fácil utilização.
Como adicionar Expires headers (cabeçalhos expirados) com .htaccess no Apache Web Server
Se seu servidor web usa o servidor web Apache, você pode adicionar cabeçalhos expirados usando o arquivo .htaccess, que está localizado na pasta raiz do seu servidor (a mesma pasta que contém o arquivo wp-config.php).
Aqui está o que você precisa fazer:
- Conecte-se ao seu servidor usando FTP em seu cliente FTP preferido
- Localize o arquivo .htaccess na pasta raiz
- Baixe uma cópia de backup do arquivo .htaccess para seu computador local. Dessa forma, se alguma coisa der errado, você pode recarregar sua cópia de segurança para corrigir qualquer problema em potencial.
- Adicione o trecho de código abaixo perto da parte superior do arquivo
## 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 ##Embora os valores padrão devam funcionar bem para a maioria dos sites, você pode ajustar os períodos de tempo para diferentes tipos de arquivo no trecho de código, de acordo com suas necessidades.
Como adicionar Expires headers (cabeçalhos expirados) com arquivo de configuração no Nginx Web Server
Se seu host utiliza o servidor web Nginx, você pode controlar os cabeçalhos expirados editando o arquivo de configuração do seu servidor. Como você edita este arquivo dependerá do seu host – você pode contatar o suporte do seu host se precisar de ajuda.
Kinsta utiliza o servidor web Nginx – mas lembre-se de que já configuramos as coisas para você, portanto você não precisa adicionar nenhum código você mesmo.
Aqui está o código que você precisa usar:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Você pode ajustar os tempos de expiração para diferentes tipos de arquivos, conforme a necessidade.
Como adicionar Expires headers (cabeçalhos expirados) com um Plugin WordPress
Se você não se sente confortável em adicionar os cabeçalhos expirados, você também pode encontrar alguns plugins WordPress que podem fazer o trabalho para você. Alguns desses plugins adicionam cabeçalhos expirados, enquanto outros usam o cache-control. De qualquer forma, o resultado final é que seu site WordPress pode se beneficiar do cache do navegador.
Uma solução é usar um plugin de cache se seu host ainda não tiver implementado o cache para você. Uma ótima opção aqui é o WP Rocket, que é totalmente compatível com a Kinsta. Assim que você ativa o plugin WP Rocket, ele ativa automaticamente o cache do navegador para você – não há necessidade de configurar qualquer outra configuração.
Aqui estão alguns outros plugins de cache que podem ajudá-lo a implementar cabeçalhos expirados e/ou cache de navegador:
Se você já tem o cache separado e só quer um plugin mais direcionado, dois bons plugins gratuitos são:
O plugin Leverage Browser Caching não tem nenhuma configuração – basta ativá-lo e ele começa a funcionar imediatamente.
O plugin Add Expires Headers permite controlar os cabeçalhos expirados para diferentes tipos de arquivos – você pode fazer estas escolhas a partir da nova área Adicionar Cabeçalhos Expirados em seu painel do WordPress:
Como testar se os Expires headers (cabeçalhos expirados) estão funcionando
Para testar se seus cabeçalhos expirados estão devidamente configurados, você pode usar esta ferramenta gratuita da GiftOfSpeed. Uma vez que você entre na URL do seu site, a ferramenta lhe dirá duas coisas:
- A duração do cache para todos os arquivos em seu site.
- O tipo de cache (deveria dizer “cabeçalhos expirados, pois este é o método que você utilizou, mas você também pode ver o cache-control, dependendo da configuração do seu site).
Você também pode executar seu site através de qualquer ferramenta de teste de velocidade que estiver usando (por exemplo, GTmetrix) e verificar se você ainda está vendo a mensagem “Adicionar cabeçalhos expira”.
Como testar cabeçalhos com terminal
Se você preferir testar cabeçalhos expirados com uma opção mais técnica, você pode fazer um pedido de curl no Terminal para um ativo estático em seu site, e inspecionar os cabeçalhos HTTP diretamente. Por exemplo, se seu cabeçalho expirado ou regra cache-control abranger arquivos CSS, você pode fazer uma solicitação de curl como a abaixo.
cacho -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.css
Em nosso caso, o pedido de curl o arquivo style.min.css fornece a resposta abaixo.
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Como você pode ver, a resposta inclui uma expires e cabeçalhos de cache-control. Especificamente, o cabeçalho de cache-control mostra uma max-age de 315360000 segundos, o que indica um tempo de expiração de um ano.
Como adicionar Expires headers (cabeçalhos expirados) para Scripts externos
Os métodos que mostramos acima lhe permitirão controlar os cabeçalhos expirados para todos os arquivos no servidor do seu site WordPress. Entretanto, esses métodos não permitem que você controle os cabeçalhos expirados para scripts de terceiros que você possa estar carregando, tais como Google Fonts, Google Analytics, etc.
Por essa razão, algumas ferramentas de teste de velocidade ainda podem sinalizar isso como um problema potencial, mesmo que você já tenha implementado os cabeçalhos expirados através dos métodos acima.
Aqui estão algumas soluções para scripts comuns de terceiros…
Como adicionar cabeçalhos expirados às fontes do Google
Muitos sites WordPress confiam nas fontes do Google para fontes personalizadas. Isto normalmente envolve carregar as fontes a partir do CDN do Google, o que significa que você não será capaz de definir cabeçalhos expirados através da configuração do seu servidor.
Uma solução fácil é hospedar localmente os arquivos de fontes, em vez de confiar no CDN do Google. Para configurar isso, você pode usar o plugin gratuito Optimize My Google Fonts (OMGF) no WordPress.org.
Você também pode Guia Detalhado de Hospedagem de Fontes Locais em WordPress para saber mais sobre os prós e os contras desta abordagem.
Como adicionar cabeçalhos expirados ao Google Analytics
Se você estiver vendo problemas relacionados ao cache do navegador e ao Google Analytics, você também pode considerar hospedar localmente o script do Google Analytics, da mesma forma que mostramos com o Google Fonts.
Aqui estão alguns plugins WordPress que facilitam a realização disto:
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket com seu add-on Google Tracking incluído.
Resumo
Para recapitular, os Expires headers (cabeçalhos expirados) ajudam a controlar o comportamento de cache do navegador para diferentes tipos de arquivos em seu site WordPress.
Atualmente, muitos sites dependem de cabeçalhos de cache-control em vez de cabeçalhos expirados porque o cache-control é uma opção mais moderna que proporciona mais flexibilidade. No entanto, os cabeçalhos expirados ainda funcionam bem para a maioria dos sites e você também pode usar os cabeçalhos expirados e o cache-control ao mesmo tempo.
Além disso, algumas ferramentas de teste de velocidade reduzirão a pontuação do seu site se você não implementar cabeçalhos expirados, o que pode ser sua principal motivação por trás da configuração desta tática.
Se você hospeda seu site WordPress em Kinsta, você não precisa se preocupar com cabeçalhos expirados porque nós cuidamos de tudo para você. Entretanto, se seu site for hospedado em outro lugar, você pode adicionar cabeçalhos expirados ao WordPress usando os trechos de código que fornecemos ou um dos plugins que apresentamos.
