Cache de Browser: Como Usar Para Melhor Performance

📚 Relacionado: performance web lighthouse • otimizar imagens guia acelerar site • publico alvo identificacao estrategia site

Cache de navegador para melhor performance

:::insight

variant=info

title=Cache mal configurado prejudica visitantes recorrentes

content=Sem headers de cache (Cache-Control, ETag) configurados, o navegador rebaixa o mesmo CSS e JS a cada visita — mesmo para quem já esteve no site minutos antes. Isso pesa principalmente em conexões móveis.

:::

:::case

title=Assets sem tempo de expiração definido

image=

description=Situação comum: arquivos estáticos (logo, ícones, CSS) são servidos sem header de cache explícito, forçando o navegador a revalidar tudo a cada carregamento de página.

result=Definir cache de longa duração para arquivos que raramente mudam reduz o tempo de carregamento em visitas repetidas, sem necessidade de qualquer mudança de design.

:::

Um cliente comparou seu orçamento com dois concorrentes antes de decidir. Voltou no seu site umas quatro vezes naquela semana pra reler, comparar, mostrar pro sócio. Se seu site carrega devagar toda vez que ele volta, cada uma dessas visitas é uma nova chance de ele desistir no meio do caminho — mesmo já conhecendo o site.

O que é cache de browser, afinal?

Cache é um armazenamento temporário. Quando seu visitante acessa o site pela primeira vez, o navegador baixa todos os arquivos: imagens, CSS, JavaScript, fontes. Sem cache, na segunda visita ele baixa tudo de novo — mesmo que nada tenha mudado.

Com cache configurado corretamente, o navegador guarda esses arquivos por um tempo definido. Na próxima visita, em vez de pedir novamente, ele pega da memória. Site carrega praticamente instantaneamente.

É a diferença entre:

Primeira visita: 4-5 segundos (primeira carga)
Segunda visita sem cache: 4-5 segundos (tudo novamente)
Segunda visita COM cache: 0.5-1 segundo (tudo vem da memória local)

Por que visitantes voltam múltiplas vezes antes de comprar

Seu cliente não decide na primeira visita. Ele volta para:

Reler informações
Comparar com concorrentes
Mostrar pra sócio/família
Checar disponibilidade ou preço
Verificar novamente o contato/localização

Se cada volta é lenta, ele fica frustrado. Uma experiência lenta na terceira visita pode custar a venda, mesmo que na primeira ele tenha adorado.

Como funciona na prática: o ciclo de vida do cache

Primeira visita:

Navegador acessa seu site
Servidor entrega imagens, CSS, JavaScript
Navegador salva tudo localmente (se cache estiver configurado)

Segunda visita (mesma semana):

Navegador verifica: "Tenho esses arquivos salvos e ainda são válidos?"
Sim? Usa os locais. Site carrega em 0.5 segundos.
Não? Pede novamente pro servidor.

Se o arquivo expirou ou nunca teve cache configurado, ele baixa tudo de novo.

Cache-Control: o header HTTP que controla tudo

O header Cache-Control é uma instrução que você coloca na resposta do servidor. Ele diz pro navegador: "Quanto tempo você pode guardar este arquivo?"

Exemplo:

```

Cache-Control: max-age=31536000

```

Isso significa: "Guarde este arquivo por 1 ano" (31536000 segundos).

Para imagens estáticas (logo, ícones, fotos de produto):

```

Cache-Control: public, max-age=31536000

```

Para conteúdo que muda (página de blog, preços):

```

Cache-Control: public, max-age=3600

```

(3600 segundos = 1 hora)

Para conteúdo que nunca deve ser cacheado (checkout, painel de usuário):

```

Cache-Control: no-cache, no-store, must-revalidate

```

Tipos de cache: browser vs servidor

Existem dois níveis de cache, e você precisa configurar os dois:

TipoO que cacheaTempo típicoQuem controla BrowserImagens, CSS, JS, fontesHoras a 1 anoSeu servidor (header) CDN/ServidorConteúdo dinâmico, páginasMinutos a horasSeu host/CDN Servidor aplicaçãoRespostas de BDSegundos a minutosSeu código

Browser cache é o mais importante pro visitante que volta — é o que faz carregar rápido.

Exemplos por tipo de arquivo

Imagens (logo, icons, backgrounds)

Nunca mudam
Cache: 1 ano

```

Cache-Control: public, max-age=31536000, immutable

```

Folhas de estilo (CSS)

Mudam esporadicamente
Cache: 1 mês

```

Cache-Control: public, max-age=2592000

```

JavaScript da aplicação

Pode mudar frequentemente
Cache: 1 semana

```

Cache-Control: public, max-age=604800

```

Conteúdo HTML (páginas, blog)

Muda regularmente
Cache: 1 hora

```

Cache-Control: public, max-age=3600

```

Dados dinâmicos (preços, disponibilidade)

Muda constantemente
Cache: 0 minutos (sem cache)

```

Cache-Control: no-cache, must-revalidate

```

Dica: Se você mudar um arquivo com cache de 1 ano, o navegador continuará usando a versão velha. Solução: renomear o arquivo no código (ex: style.min.css → style.min.a1b2c3.css). Assim o navegador pensa que é arquivo novo e baixa.

Como configurar cache no seu servidor

Se você usa .htaccess (hospedagem compartilhada)

Adicione ao arquivo .htaccess na raiz:

```apache

ExpiresActive On

ExpiresDefault "access plus 10 days"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType image/webp "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/javascript "access plus 1 month"

ExpiresByType text/html "access plus 1 hour"

Header set Cache-Control "public, max-age=31536000" ".jpg .jpeg .png .gif .webp .css .js .svg"

Header set Cache-Control "public, max-age=3600" ".html"

```

Se você usa Nginx (VPS/Cloud)

Adicione ao seu arquivo de configuração:

```nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|webp)$ {

expires 1y;

add_header Cache-Control "public, immutable";

}

location ~* \.html$ {

expires 1h;

add_header Cache-Control "public, must-revalidate";

}

```

Se você usa Cloudflare (CDN)

Cloudflare já configura cache automaticamente, mas você pode customizar:

Acesse seu dashboard Cloudflare
Vá em Caching → Cache Rules
Configure tempos por tipo de arquivo

Se você usa Vercel, Netlify ou hospedagem moderna

Essas plataformas já configuram cache automaticamente para arquivos estáticos. Você só precisa verificar que está funcionando.

Impacto direto: conversão e SEO

Conversão: Visitante que volta não precisa esperar. Site rápido = menos abandono na terceira visita.

SEO: O Google mede Core Web Vitals — velocidade de carregamento, interatividade e estabilidade visual. Sites com cache bem configurado carregam mais rápido e recebem melhor ranking.

Não é coincidência que sites rápidos convertem mais — é psicologia + algoritmo alinhados.

Como verificar se seu cache está funcionando

Opção 1: Google PageSpeed Insights

Acesse pagespeed.web.dev
Digite a URL do seu site
Na seção "Diagnostics", procure por "Serve static assets with an efficient cache policy"
Se aparecer um ✓ verde, está bom. Se é vermelho, precisa configurar.

Opção 2: DevTools do navegador (F12)

Abra seu site
Pressione F12 → aba Network
Recarregue a página
Veja a coluna "Size" — se disser "disk cache" ou "memory cache", está usando cache. Se disser um tamanho em KB/MB, está baixando novamente.

Opção 3: Ferramentas online

Acesse webpagetest.org, digite seu URL, rode o teste. Ele mostra quanto cada arquivo pesa na primeira vs segunda visita.

Aquele cliente que volta quatro vezes

Ele não decide na primeira visita. Volta pra comparar, confirmar, mostrar pra alguém. Cache bem configurado garante que cada volta seja instantânea — nenhuma fricção técnica entre ele e o botão de contato.

Essa diferença de 3 segundos vs 0.5 segundo pode ser a diferença entre venda e abandono.

Seu site está perdendo vendas por lentidão nas visitas repetidas?

A Desenvolve Sites audita cache, otimização de imagens e performance em browser real. Configuramos cache estratégico, comprimimos imagens, removemos bloqueadores. Seus visitantes voltam e encontram um site quase instantâneo. Chame a gente.

Perguntas Frequentes

Cache muito agressivo pode quebrar o site?

Sim, se configurado errado. Se você cachea uma página que muda todo dia com cache de 1 mês, visitantes veem versão desatualizada. Regra: quanto mais estático é o arquivo, mais você pode cachear. Imagens: 1 ano. Blog: 1 hora.

Meu site usa WordPress/Drupal. Como faço cache lá?

Plugins fazem isso pra você. No WordPress, use WP Super Cache ou W3 Total Cache. No Drupal, ative o módulo Page Cache. Eles configuraram os headers corretos automaticamente.

Se eu mudei o arquivo, o visitante não vê a mudança?

Correto. Ele vê a versão cacheada até expirar. Por isso nomes de arquivo precisam mudar quando o conteúdo muda — seu CSS de build (main.a1b2c3.css) sempre renomeia. Cache antigo = arquivo antigo. Cache novo = arquivo novo.

Cache de browser e CDN são a mesma coisa?

Não. Browser cache é no computador/celular do usuário. CDN cache é em servidores espalhados pelo mundo. Ambos aceleram, mas funcionam em níveis diferentes. Idealmente, você configura os dois.