Como configurar cache do navegador (browser cache) Print

Como configurar cache do navegador (browser cache)

Oi! Aqui é a Sensei da GeHost 🧑‍🏫 Vou te mostrar como ativar o cache do navegador no seu site — é mais fácil do que parece, e vai deixar seus visitantes MUITO mais felizes (e seu site mais rápido). Deixa comigo!

O que é cache do navegador?

Simples: é quando o navegador (Chrome, Firefox, Safari…) do seu visitante salva arquivos do seu site no computador dele — tipo imagens, botões, estilos de cores. Na próxima vez que ele volta, em vez de baixar tudo de novo, o navegador usa os arquivos que já tem guardado. Resultado? Seu site carrega bem mais rápido pra ele. Win-win! 🎯

Por que usar cache do navegador?

• Seu site fica mais rápido — os visitantes não precisam baixar as mesmas imagens, CSS e JavaScript toda vez que visitam.
• Menos banda — menos dados transferidos = menor custo pra você.
• Melhor experiência — site rápido = visitante feliz = mais chance de ele comprar/enviar mensagem/fazer o que você quer.
• Bônus no Google — mecanismos de busca adoram sites rápidos; cache ajuda você a subir de posição.

Como funciona?

Quando o visitante chega no seu site, o navegador dele recebe uma "ordem" sua dizendo: "ei, guarda essa imagem por 30 dias; guarda esse CSS por 60 dias; guarda esse JavaScript por 90 dias". Se o visitante voltar dentro desse período, a máquina dele usa os arquivos guardados. Se passar do prazo, o navegador baixa uma versão nova (pra garantir que está atualizado).

💡 Dica importante: Cache é especialmente útil pra arquivos que não mudam muito — logo, imagem do seu logo, CSS, fontes. Já conteúdo que muda todo dia (homepage, notícias, preços) você deixa com cache curto ou sem cache.

Como configurar — 3 métodos

Método 1: Via .htaccess (mais comum)

Se seu site roda em um servidor Apache (quase todo site de hospedagem compartilhada roda), você usa um arquivo chamado .htaccess. É um arquivo bem pequeno que controla tudo — inclusive cache. Vamos lá:

1. Acesse seu painel cPanel — faça login com seu usuário e senha.
2. Abra o Gerenciador de Arquivos — procure por "File Manager" (ou "Gerenciador de Arquivos").
3. Navegue até a pasta raiz do seu site — procure por public_html (é aquela onde ficam seus arquivos de site).
4. Procure por um arquivo chamado ".htaccess"
   • Se JÁ existe: clique nele com botão direito → Editar (ou "Edit").
   • Se NÃO existe: clique em "+ Arquivo" (ou "Create New File") e crie um chamado .htaccess (com o ponto na frente, é importante!).
5. Cole este código no arquivo (se já tiver conteúdo, cola no fim):

   <IfModule mod_expires.c>
     ExpiresActive On
     ExpiresDefault "access plus 2 days"
     
     # Imagens — 1 mês
     ExpiresByType image/jpeg "access plus 1 month"
     ExpiresByType image/gif "access plus 1 month"
     ExpiresByType image/png "access plus 1 month"
     ExpiresByType image/webp "access plus 1 month"
     ExpiresByType image/svg+xml "access plus 1 month"
     
     # CSS — 1 mês
     ExpiresByType text/css "access plus 1 month"
     
     # JavaScript — 1 mês
     ExpiresByType application/javascript "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     
     # Fontes — 1 ano (não mudam nunca)
     ExpiresByType application/font-woff "access plus 1 year"
     ExpiresByType font/ttf "access plus 1 year"
     ExpiresByType application/x-font-opentype "access plus 1 year"
     
     # HTML — 12 horas (muda com frequência)
     ExpiresByType text/html "access plus 12 hours"
   </IfModule>
   
   <IfModule mod_headers.c>
     # Cache para imagens
     <FilesMatch "\.(jpg|jpeg|png|gif|webp|svg)$">
       Header set Cache-Control "max-age=2592000, public"
     </FilesMatch>
     
     # Cache para CSS e JavaScript
     <FilesMatch "\.(css|js)$">
       Header set Cache-Control "max-age=2592000, public"
     </FilesMatch>
     
     # Cache para fontes
     <FilesMatch "\.(woff|woff2|ttf|otf)$">
       Header set Cache-Control "max-age=31536000, public"
     </FilesMatch>
     
     # Sem cache para HTML
     <FilesMatch "\.html?$">
       Header set Cache-Control "max-age=43200, must-revalidate"
     </FilesMatch>
   </FilesMatch>
   </IfModule>

6. Salve o arquivo — aperte Ctrl+S ou clique em "Save" (Salvar).
7. Pronto! Cache ativado. 🎉

⚠️ Atenção: Se seu site já tem um arquivo .htaccess e você não tem certeza do que está lá, não apague nada — cola o código no FIM do arquivo. Ou, antes de editar, faz um backup (clica direito no arquivo → Download).

Método 2: Via WordPress (se seu site roda WordPress)

Se você usa WordPress, tem jeito mais fácil — você nem precisa mexer em arquivo. Usa um plugin:

1. No painel do WordPress, vai em Plugins → Adicionar novo.
2. Procura por "WP Super Cache" ou "W3 Total Cache" (são os mais populares).
3. Instala e ativa.
4. Nas configurações do plugin, busca por "Browser Cache" ou "Cache Control" e ativa.
5. Salva tudo.

Pronto! O plugin cuida de tudo pra você. 😊

Método 3: Via painel cPanel (se seu servidor tiver a ferramenta)

Alguns servidores têm uma ferramenta visual no cPanel pra isso. Se quiser procurar:

1. No cPanel, procura por "ModSecurity", "LiteSpeed Cache" ou "Optimize Website" (o nome varia).
2. Se encontrar, segue as instruções na tela — geralmente é só clicar em "Enable" (Ativar).

Se não encontrar, não se preocupa — o Método 1 (via .htaccess) funciona em 99% dos casos. 💪

Como verificar se está funcionando

Quer conferir se o cache tá mesmo ativado? Bem fácil:

1. Abra seu site no navegador.
2. Aperta F12 (ou clica direito → Inspecionar).
3. Vai na aba "Network" (Rede).
4. Atualize a página (F5).
5. Procura por uma das suas imagens ou arquivo CSS.
6. Na coluna "Size" (Tamanho), se vir algo como "(from memory cache)" ou "(from disk cache)", é sucesso! Cache tá funcionando. ✅

🎯 Bônus: Use uma ferramenta online como GTmetrix ou PageSpeed Insights (do Google) — elas testam seu site de verdade e te mostram se cache tá configurado.

Dicas práticas pra não errar

• Arquivo .htaccess é sensível — um erro de digitação quebra tudo. Se seu site sumiu ou deu erro 500, delete o arquivo ou volta a um backup.
• Teste em navegador anônimo (Ctrl+Shift+N no Chrome) — assim não usa cache antigo e você vê a versão fresca.
• Atualizou seu site? Os visitantes antigos ainda veem a versão antiga por um tempo (até o cache expirar). É normal. Pra eles verem na hora, eles podem apertar Ctrl+Shift+R (force refresh) no navegador.
• Imagens e CSS podem ficar 1-2 meses em cache — é seguro. HTML deixa mais curto (12h-1 dia) se você muda conteúdo com frequência.
• Cuidado com versões de arquivo — se você atualizar um CSS mas deixa o mesmo nome, o visitante vê a versão antiga até o cache expirar. Dica: renomeia o arquivo ou adiciona ?v=2 no final (ex.: style.css?v=2).

Perguntas frequentes

P: Isso vai deixar meu site mais lento pra mim atualizar?
R: Não. Você atualiza no servidor, e aí que muda. Os visitantes é que veem uma versão mais antiga até o cache deles expirar. Mas como é rápido, não é problema.

P: Posso deixar tudo com 1 ano de cache?
R: Evita. Folhas de estilo (CSS) e JavaScript: tá certo 1-2 meses. Imagens: pode ser 1-3 meses. HTML (a página em si): melhor 12h a 1 dia, porque você muda conteúdo. Assim você pega o melhor dos dois mundos.

P: E se meu site for uma loja online com preços que mudam?
R: Coloca cache curto nas páginas de PRODUTO (tipo 1-6 horas) e cache longo em imagens/CSS (1-2 meses). Assim os preços atualizam rápido e o site ainda é rápido.

P: Preciso fazer algo especial no bandwith/limite?
R: Não! Cache do navegador SÓ economiza banda — você não gasta mais nada, pelo contrário. É tudo ganho. 🎁

🤝 Precisa de ajuda? Se algo não funcionar, manda uma mensagem pro suporte da GeHost — a gente verifica o .htaccess com você, sem problema! 💙