Site lento e tentando melhorá-lo? Você provavelmente já viu este aviso, mas não tem certeza do que ele significa ou como corrigi-lo ... mas nós ajudamos você. Aproveitar o cache do navegador é uma maneira de tornar seu site mais rápido, mas instruindo o navegador a armazenar ou "armazenar em cache" os arquivos por algum tempo, para que não seja necessário baixá-los novamente em uma visita posterior. Em suma, isso é tudo o que isso significa.
Mas fique e leia tudo sobre como tornar seu site mais rápido corrigindo esse erro ou aviso.
Essencialmente, se você deseja alavancar o cache do navegador, você precisa especificar por quanto tempo os navegadores da web devem manter imagens, arquivos CSS e Javascript armazenados localmente, no navegador do cliente. Usando essas especificações e configurações, o navegador do usuário usará less dados enquanto navega pelas páginas do seu site (porque é necessário baixar menos arquivos). Para alavancar o cache do navegador, o WordPress significa uma melhoria na velocidade de carregamento do seu site.
Se você estiver com pouco tempo, esta é a maneira mais fácil de aproveitar o cache do navegador WordPress:
Como corrigir o aviso do WordPress de uso de cache do navegador
- Baixe o plugin que pode ser encontrado SUA PARTICIPAÇÃO FAZ A DIFERENÇA
- Vá para o painel do seu WordPress e visite: Painel de controle> Plug-ins> Adicionar novo
- Pesquise "Leverage Browser Caching" ou clique em Upload Plugin, escolha o arquivo que você baixou e clique em Install Now
- Ative o plugin
- Teste seu site novamente para confirmar se as novas configurações estão funcionando corretamente e se o aviso desapareceu
Ao implementar essas mudanças mínimas, você verá que sua pontuação em sites como GTMetrix, Pingdom Tools ou Pagespeed Insights aumentará significativamente.
Na verdade, esta é uma das maneiras mais fáceis de tornar o seu site WordPress mais rápido.
Envolve muito pouco esforço de sua parte e é uma das tarefas de alta prioridade recomendadas por Google para fazer seu site carregar mais rápido. Também é recomendado por sites como GTMetrix ou Google Pagespeed Insights para tornar seu carregamento mais rápido.
O que é o cache do navegador?
Você pode aproveitar o cache do navegador por meio do processo de definição de uma data de expiração longa no conteúdo estático do seu site. Isso permite que os navegadores "aproveitem" o armazenamento em cache e reutilizem esses arquivos continuamente, sem ter que baixá-los. Ao armazenar esses arquivos em cache, eles não precisam ser baixados novamente, portanto, o carregamento do seu site é mais rápido.
Antes de realmente mostrar como implementar isso, vamos primeiro discutir o que significa alavancar o cache do navegador no WordPress e como ele funciona!
Depois de explicarmos como funciona, você pode entender como ajuda a faça suas páginas carregarem mais rápido.
Basicamente, quando alguém visita uma página, o navegador precisa baixar todos os recursos do servidor nesse domínio do servidor. Isso inclui HTML, arquivo CSS, JS, texto, imagens e quaisquer outros ativos) para carregar e exibir a página atual.
Agora, em vez de realmente baixar tudo repetidamente cada vez que você visita uma página diferente no mesmo site, o navegador usa o que é chamado de cache da Web. Este é um recurso usado por navegadores para 'armazenar temporariamente' ou 'armazenar em cache' ativos de página da web no armazenamento local do dispositivo. Este armazenamento ou dados são chamados de ' Cache da Web'ou'Cache HTTP'.
Dê uma olhada neste diagrama divertido que explica como funciona o cache da web:
Podemos ver acima, que na primeira vez que o dispositivo do usuário (à esquerda) solicita ao servidor (à direita) o arquivo de imagens / logotipo, a solicitação é interceptada pelo mecanismo de cache da web (que verifica se há uma cópia desse arquivo). Caso contrário, ele o busca no servidor. Na próxima visita, em vez de ir para o servidor, ele obtém a partir de sua própria cópia.
Portanto, a beleza dessa função é que quando um usuário visita o mesmo site novamente, ou uma página diferente no mesmo domínio, o navegador usará a cópia que está atualmente residindo no cache temporário - em vez de ter que baixar todos os recursos mais uma vez. O navegador só fará download de coisas diferentes.
Como muitos sites terão apenas alterações mínimas de uma página para outra e entre as visitas, a reutilização da cópia em cache permitiu que a página carregasse muito mais rápido.
Isso também ajuda a reduzir o consumo de largura de banda do seu servidor web e também reduz a carga no servidor. Você também pode ter encontrado um aviso ao otimizar suas páginas para aumentar a velocidade.
Aviso de velocidade de página para aproveitar o cache do navegador
Sites como GTMetrix ou Pagespeed Insights podem mostrar o seguinte aproveitar o cache do navegador aviso, que você precisará corrigir se não tiver ativado as configurações abaixo.
mas este era realmente o aviso mostrado em uma versão mais antiga do Pagespeed Insights. O aviso mais recente é um pouco assim:
Sirva ativos estáticos com uma política de cache eficiente
Agora, o que isso realmente significa?
Embora a função descrita acima seja ótima em teoria, por padrão a maioria dos sites irá "marcar" o conteúdo para expirar após 8 dias ou um curto período de tempo. Isso significa que, se um usuário visitar seu domínio novamente após 1 semana, ele precisará baixar os recursos novamente.
Quando configuramos um método para aproveitar o cache do navegador, o que realmente fazemos é instruir o navegador a estender a vida útil ou a data de expiração dos recursos que são baixados por nossos visitantes e, consequentemente, otimizar o desempenho.
Ao estender a vida útil do cache (ou quanto tempo um arquivo leva para se tornar antigo), você está garantindo que seus visitantes não precisem esperar para baixar as mesmas coisas sempre que visitarem seu site.
Isso envolve poucas mudanças e não é muito complicado de implementar - e você encontrará a sintaxe exata abaixo.
O que a mudança realmente faz é definir datas de expiração de conteúdo adicionando Cabeçalhos de controle de cache e Cabeçalhos ETag em cabeçalhos HTTP. O cabeçalho Cache-Control declara o período de armazenamento em cache de um determinado arquivo ou tipo de arquivo. A ETag é então usada para verificar quaisquer alterações existentes (ou não) entre os recursos em cache e os solicitados.
A configuração normalmente permite que você especifique o período em dias, meses ou anos para armazenar os arquivos de cache localmente. Claro, se você espera alterar os recursos de vez em quando, é aconselhável definir datas de vencimento com uma frequência que corresponda aproximadamente ao período em que você espera alterá-los.
A propósito, se você deseja tornar seu WordPress rápido, existem alguns plug-ins como este o que pode fazer uma diferença real no desempenho em poucos minutos (com pouco ou nenhum esforço).
Não está pronto para usar um plugin agora? Leia...
Se você estiver interessado em tornar seu site mais rápido, recomendamos visitar nosso artigo: [25 ações] Acelere o WordPress: Obtenha um site super-rápido hoje - um guia completo.
1. Usando o arquivo .htaccess
Aqui estão as instruções exatas que você precisa executar:
- Acesse o CPanel de sua conta de hospedagem
- Vá para a pasta raiz do site
- Abra o arquivo .htaccess com seu Editor de Arquivos. Se você não encontrar o arquivo, verifique se consegue visualizar os arquivos ocultos (o arquivo .htaccess está oculto por padrão)
- Adicione as seguintes edições ao final do arquivo
- Adicionar cabeçalhos de expiração com longos tempos de expiração
- Adicionar cabeçalhos de controle de cache
- Desativar cabeçalhos de ETag
- Não faça nenhuma outra alteração
- Salve o arquivo
- Execute o teste novamente
Para definir o tempo de expiração de recursos, como imagens e arquivos CSS, é necessária uma ligeira modificação em seu arquivo .htaccess. Ele é encontrado na raiz do seu servidor de hospedagem. Você pode alterar os valores dos cabeçalhos de expiração para aumentar o desempenho.
Defina esses valores, desde que façam sentido para o seu site - 1 mês normalmente é bom o suficiente.
#Customize expires caching start - ajuste o período de acordo com suas necessidades FileETag MTime Size AddOutputFilterByType DEFLATE text / plain text / html text / xml text / css application / xml application / xhtml + xml application / rss + xml application / javascript application / x-javascript ExpiresActive On ExpiresByType text / hypetml "access 600 segundos" ExpiresBy application / xhtml + xml "access 600 seconds" ExpiresByType text / css "access 1 month" ExpiresByType text / javascript "access 1 month" ExpiresByType text / x-javascript "access 1 month" ExpiresByType application / javascript "access 1 month" ExpiresByType application / x-javascript "acesso 1 mês" ExpiresByType application / x-shockwave-flash "acesso 1 mês" ExpiresByType application / pdf "acesso 1 mês" ExpiresByType image / x-icon "acesso 1 ano" ExpiresByType image / jpg "acesso 1 ano "ExpiresByType image / jpeg" acesso 1 ano "ExpiresByType image / png" acesso 1 ano "ExpiresByType image / gif" acesso 1 ano "ExpiresDefault" acesso 1 mês "
#Expires caching end
Acha que não se sente confortável para fazer essas mudanças sozinho?
Se você não tiver certeza sobre como fazer essa mudança, pode optar por fazer isso por meio de um show barato no Fiverr.
Encontre os melhores jogos de otimização de velocidade de sites no Fiverr
Com as alterações acima, estamos definindo ativos que são atualizados rapidamente, como o HTML da sua página, para expirar após 600 segundos (isso ocorre porque o HTML normalmente muda com mais frequência). Também estamos mudando coisas como CSS e Javascript para expirar apenas uma vez por mês (esses arquivos só mudam se você fizer mudanças em seu modelo ou plug-ins).
Isso significa que, se o visitante visitar a página novamente em um mês, ele não precisará baixar novamente seus ativos CSS e JS. Se você sabe que raramente realiza esses tipos de alterações em seu site - você pode definir o valor mais alto, para 1 ano, semelhante ao cabeçalho jpeg, png expira.
Esta é a maneira mais eficaz de aproveitar o cache do navegador para WordPress ou outros sites que usam um arquivo .htaccess.
Definir arquivos de imagem com um longo tempo de validade
Como você também pode ver em nosso exemplo acima, nossas imagens expiram apenas uma vez por ano. Às vezes, isso pode ser muito longo, portanto, um mês também é suficiente. É preciso descobrir o que faz sentido para o seu site.
Isso garante que a maior mídia que leva mais tempo para baixar seja mantida na máquina dos visitantes, e não terá que ser baixada novamente até o próximo ano. Devido a essa mudança em seu arquivo .htaccess, você está usando o cache do navegador no WordPress corretamente - as imagens não são baixadas novamente por um ano inteiro.
Isso torna a experiência de um cliente recorrente muito mais positiva - porque é preciso less para carregar cada página. Os arquivos armazenados em cache agora são reutilizados.
Depois de definir as datas de expiração, é importante definir também os cabeçalhos Cache-Control corretos para que a configuração acima realmente funcione corretamente. Esta é outra configuração no arquivo .htaccess, que você pode encontrar abaixo.
Adicionar cabeçalhos de controle de cache
A configuração a seguir também deve ser adicionada ao arquivo para definir os cabeçalhos de controle de cache conforme discutido acima.
# BEGIN Cabeçalhos de controle de cache
Cabeçalho anexar Cache-Control "public" Cabeçalho anexar Cache-Control "public" Cabeçalho anexar Cache-Control "privado" Cabeçalho anexar Cache-Control "privado, deve-revalidar"
Já definimos as datas de expiração, portanto não precisamos defini-las novamente aqui.
Desativar cabeçalhos de ETag para sites de vários servidores ou CDNs
A última coisa que precisamos fazer é (des) definir a configuração Etags.
Essencialmente, isso é importante apenas se você estiver usando um CDN para servir alguns de seus recursos. Etags são cabeçalhos normalmente construídos com atributos que os tornam únicos para cada máquina específica que hospeda um site (razão técnica - usa um MD5 gerado pelo servidor, tornando-o único para o servidor que o gerou).
Se um site estiver usando um CDN ou vários servidores para servir suas páginas, NÃO há garantia de que o mesmo servidor será usado - portanto, as tags não corresponderão quando um navegador obtiver o componente original de um servidor e posteriormente tentar validar esse componente em um servidor diferente.
Por esse motivo, seria melhor DESAJUSTÁ-los se você estiver usando vários servidores ou um CDN para hospedar seu site. Isso permite que os cabeçalhos de controle de cache realmente controlem o cache em vez das ETags. Visto que colocamos configurações para controlar o cache por meio dos cabeçalhos Cache-Control, as ETags não são mais necessárias - então, vamos desativá-las.
Adicione isso ao seu arquivo .htaccess para removê-los.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag NoneSe precisar ler mais sobre o que as Etags fazem, você pode encontrar mais detalhes e ler sobre eles neste artigo: https://en.wikipedia.org/wiki/HTTP_ETag
2. Usando Plugins
Ajustar e brincar com o arquivo .htaccess pode quebrar seu site. Se você cometer um pequeno erro, seu servidor não será capaz de analisá-lo, começará a jogar páginas em branco, ou lance o erro 500 e o site estará morto!
Portanto, se você não gosta de fazer isso, pode instalar um plug-in simples que cuida de tudo isso.
Claro, existem muitos outros plug-ins que podem fazer isso. A maioria dos plug-ins com o objetivo de tornar suas páginas mais rápidas fará a maioria dessas configurações em segundo plano.
Essencialmente, além de lidar com todas as configurações para aproveitar o cache do navegador WordPress, eles serão capazes de realizar uma série de outras otimizações de cache, como a criação de cópias temporárias (cache de arquivo), otimizações de banco de dados, Memcache e outras otimizações que tornam seu site mais rápido em geral .
Isso inclui plug-ins como WPRocketName, WP Cache Fasteste W3 Total Cache e plug-ins de cache premium.
Vamos ver alguns desses plug-ins.
Plugin por Rinku Yadav
Este é o mais simples de todos, ele não faz nada além de corrigir o cache do navegador de alavancagem no WordPress.
- Baixe o plugin que pode ser encontrado SUA PARTICIPAÇÃO FAZ A DIFERENÇA.
- Vá para o painel do seu WordPress e visite: Painel de controle> Plug-ins> Adicionar novo.
- Pesquise "Leverage Browser Caching" ou clique em Upload Plugin e pesquise o arquivo que você acabou de baixar.
- Clique em Instalar agora.
- Ative o plugin e pronto!
- Agora você deve testar seu site novamente para confirmar se as novas configurações estão funcionando corretamente e se o aviso desapareceu.
Se você estiver procurando por um produto que faz muito mais para tornar o seu site mais rápido, é altamente recomendável consultar o restante dos plug-ins que mencionamos abaixo.
WP Rocket
Este é um dos plug-ins mais rápidos e recomendados para WordPress, que pode lidar com todas as suas otimizações de velocidade com apenas alguns cliques. Essencialmente, isso executa otimizações de velocidade como
- compressão de arquivos estáticos (GZip) - para diminuir o tamanho total dos dados a serem entregues (temos um tutorial completo sobre como habilitar a compressão GZip no WordPress aqui)
- permite um cache de arquivo (incluindo pré-carregamento de cache) - para colocar less estresse no servidor (buscando uma cópia pré-renderizada de cada página)
- Otimização do Google Fonts - para garantir que as fontes mais pesadas sejam carregadas rapidamente),
- carregamento lento - de forma que as imagens sejam carregadas apenas quando o usuário rolar para baixo até a seção de uma página onde a imagem é necessária
- Minificação e combinação - reduzindo o tamanho e combinando ativos de texto para entregá-los mais rapidamente ao usuário final
- Adiar carregamento de JS - de forma que a página seja renderizada rapidamente em vez de esperar que todos os ativos sejam baixados. Isso é algo que abordamos CollectiveRay.
- Integra e habilita um CDN - de modo que sua mídia mais pesada seja entregue mais rapidamente
- Pré-busca de DNS - para reduzir o tempo que leva para resolver a fonte do conteúdo de terceiros
Tudo o que foi dito acima pode soar como um jargão para quem não está envolvido em otimizações de infraestrutura, mas, na realidade, são todas as coisas que você precisa fazer para que seu site carregue mais rápido.
A grande coisa é que com o WP Rocket você não precisa fazer o trabalho pesado e a configuração - é tudo feito para você! É altamente recomendável experimentar este plugin, que foi classificado como a melhor maneira de tornar o seu site mais rápido.
W3 Total Cache
Este é um dos a maioria plug-ins de cache populares de todos os tempos. Já existe há muito tempo e teve muito tempo para amadurecer muito bem para incorporar a maioria dos recursos que se esperaria de um plugin de cache.
O problema é este. Eu, alguém que trabalha com WordPress e web design há muito tempo, e é uma experiência tão frustrante trabalhar com isso. O plug-in não é simples de configurar e você realmente precisa entendê-lo e conhecê-lo bem para poder colocá-lo em funcionamento e executá-lo perfeitamente.
Se você está procurando uma boa maneira de aproveitar o cache de navegação no WordPress usando um plug-in, recomendamos o WPRocket acima em vez do W3Total Cache.
3. Aproveite o cache do navegador no Nginx
Se o seu site está realmente usando o Nginx como servidor, você precisará de um código diferente, porque o Nginx não possui um arquivo .htaccess. No entanto, ainda é relativamente fácil de implementar isso, porque você só precisa fazer algumas edições no arquivo conf do servidor.
Você precisa adicionar o código abaixo dentro de um bloco de servidor existente em seu arquivo conf. Isso normalmente será em /etc/nginx/sites-enabled/default
servidor {escuta 80; server_name localhost; localização / {root / usr / share / nginx / html; index index.html index.htm; } local ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {expira 365d; } localização ~ * \. (pdf) $ {expira em 30d; }}
Adicionar cabeçalhos de controle de cache para Nginx
localização ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {expira em 90d; add_header Cache-Control "public, no-transform"; }
Como você pode deduzir do código acima, estamos definindo o local de expiração para arquivos de imagem em 1 ano ou 365 dias, enquanto definimos PDFs para expirar após 30 dias. Você pode adicionar mais extensões de arquivo para personalizar a expiração, tornando-a diferente para outros tipos de arquivos.
Quaisquer tipos de arquivo adicionados serão armazenados em cache de acordo.
4. Como armazenar recursos de terceiros em cache
Embora seja bastante fácil aplicar a configuração acima, você descobrirá que mesmo depois de realizar as alterações acima, ainda receberá essa mensagem nas ferramentas de teste de velocidade do site e no Google Pagespeed Insights.
Isso ocorre porque a maioria dos scripts e serviços de terceiros não especifica um longo tempo de expiração - por vários motivos diferentes.
Você não tem controle sobre esses scripts, infelizmente, por isso recomendamos fortemente que você use os scripts de terceiros MÍNIMOS possíveis. Se você pode viver sem o script, elimine-o de seu site. Ao optar por incluí-lo, o tempo de carregamento de suas páginas estará arrastando para baixo.
5. Especifique um validador de cache
Este é outro aviso frequentemente mostrado pelo GTMetrix, normalmente vindo de scripts de terceiros. Essencialmente, este é o mesmo problema que acabamos de descrever na seção anterior, onde certos scripts não especificam um cabeçalho ETag ou um cabeçalho Last-Modified conforme descrito.
Infelizmente, não há muito que você possa fazer para resolver esse problema, se esses erros específicos vierem de domínios que estão fora do seu controle, como o Facebook, ou no caso da imagem abaixo, Sumo - então não há nada que você possa consertar .
Sua única solução, neste caso, seria remover esses scripts de seu domínio completamente se quiser ter certeza de que esse aviso não apareça.
Perguntas Frequentes
Como você resolve o uso do cache do navegador?
A maneira mais fácil de aproveitar o cache do navegador é instalar um plug-in que permite especificar o tempo de vida do cache de diferentes tipos de conteúdo estático. Um método alternativo, mas simples, é especificar o tempo de armazenamento em cache no arquivo .htaccess do seu site. Temos instruções detalhadas sobre como fazer isso aqui.
Como eu habilito o cache no WordPress?
Para habilitar o cache no WordPress, você pode simplesmente instalar um plugin que habilita vários níveis de cache, incluindo um cache no nível do servidor, um cache no nível da página e um cache no nível do navegador. Nosso plugin recomendado de escolha para isso é WP-Rocket, mas existem várias opções alternativas que mencionamos neste artigo que também farão o seu site carregar mais rápido.
Como faço para aproveitar o cache do navegador para scripts de terceiros?
Você não pode alterar o valor do cache do navegador para scripts de terceiros, como Facebook ou Google Analytics, porque eles são definidos no nível do servidor e você não tem nenhum controle sobre eles. Sua melhor opção, neste caso, é usar o mínimo possível desses scripts
Conclusão
Acima, mostramos várias maneiras de implementar para garantir que você seja capaz de aproveitar o cache do navegador e garantir que o conteúdo baixado seja reutilizado continuamente. Certifique-se de ter implementado isso em seu site, para evitar que o erro apareça nas ferramentas que analisam as métricas de velocidade de seu site.
Se você acha que isso está um pouco além de suas próprias capacidades, recomendamos que você deixe isso nas mãos dos PROs e instale um plugin como o WP Rocket para garantir que você obtenha o máximo de benefícios deste e de muitas outras ações para tornar seu o site carrega mais rápido.
Visite WP Rocket para tornar seu site mais rápido hoje
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!
Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.
e muitos mais ...