Resposta rápida
CDN e cache aceleram o site ao guardar cópias do conteúdo mais perto do usuário e evitar que o servidor reprocesse tudo a cada visita. A CDN entrega assets pelo servidor mais próximo; o cache do navegador e do servidor reduz requisições. A ressalva: HTML precisa de cache curto, senão visitantes veem versões antigas depois de uma atualização.
CDN (Content Delivery Network) e cache são duas das ferramentas com maior impacto em performance web. Juntas, podem reduzir o tempo de carregamento de um site pela metade sem nenhuma mudança no código.
O que é CDN e como funciona
Um CDN é uma rede de servidores distribuídos geograficamente. Quando um usuário acessa seu site, os assets (imagens, CSS, JS) são entregues pelo servidor mais próximo dele - não pelo servidor principal no Brasil.
Sem CDN: usuário em São Paulo acessa servidor em Blumenau - 5ms de latência
Com CDN global: usuário em Lisboa acessa servidor de Frankfurt - 10ms, em vez de 180ms do Brasil
Para sites brasileiros com público no Brasil, o impacto do CDN em latência é menor. Mas o benefício em cache e descompressão ainda é significativo.
Os tipos de cache
Cache do browser
O browser armazena assets localmente na máquina do usuário. Na próxima visita, não precisa baixar novamente.
Controlado por headers HTTP:
Cache-Control: max-age=31536000, immutable
(assets com hash no nome podem ser cacheados por 1 ano)
Cache-Control: no-cache
(HTML - o browser verifica se mudou, mas usa cache se não mudou)
Cache do servidor (server-side cache)
O servidor armazena a página HTML gerada. Em vez de processar PHP/banco de dados toda vez, entrega o HTML já pronto.
Para WordPress: plugins como WP Rocket, LiteSpeed Cache, ou W3 Total Cache.
Cache da CDN (edge cache)
A CDN armazena cópias dos assets nos seus servidores. Entrega direto da CDN sem chegar ao servidor de origem.
Cloudflare: CDN gratuita com impacto real
O Cloudflare oferece CDN gratuita que funciona para a maioria dos sites de pequenas empresas.
Como ativar:
- Crie conta em cloudflare.com
- Adicione seu domínio
- Troque os nameservers no seu registrador
- O Cloudflare passa a intermediar todas as requisições
O que o Cloudflare faz gratuitamente:
- CDN para assets estáticos
- Compressão automática Brotli/GZIP
- Proteção básica contra DDoS
- Cache de páginas (configurável)
- Conversão automática de imagens para WebP (planos pagos)
- SSL gratuito
Configurações recomendadas no Cloudflare:
- Minification: ativar para JS, CSS e HTML
- Brotli: ativar
- Browser Cache TTL: 1 mês para assets estáticos
- Caching Level: Standard
Cache headers na prática
Assets com hash (imagens, CSS, JS com build)
Quando o arquivo tem um hash no nome (ex: main.a3f7c9d.js), o nome muda quando o conteúdo muda. Por isso pode ser cacheado por muito tempo:
Cache-Control: public, max-age=31536000, immutable
HTML
O HTML não deve ser cacheado por muito tempo, pois muda com frequência:
Cache-Control: public, max-age=0, must-revalidate
Ou:
Cache-Control: no-cache
Fontes
Fontes raramente mudam - podem ser cacheadas por 1 ano:
Cache-Control: public, max-age=31536000
Cache-busting: como atualizar assets cacheados
Se um asset está cacheado por 1 ano mas você precisa atualizá-lo, como forçar o browser a baixar a versão nova?
Estratégia com hash: inclua o hash do conteúdo no nome do arquivo. Quando o conteúdo muda, o hash muda, e o browser trata como arquivo novo.
styles.css→styles.a3f7c.cssmain.js→main.7bc9f.js
Ferramentas de build como Vite, Webpack e Parcel fazem isso automaticamente. O mesmo vale para o JavaScript otimizado gerado por esses processos.
Estratégia com query string: adiciona versão na URL como parâmetro:
<link rel="stylesheet" href="styles.css?v=2024-05">
Como medir o impacto do cache
No Chrome DevTools > Network:
- Primeira visita: todos os assets têm status 200
- Segunda visita: assets com cache correto aparecem como
(memory cache)ou(disk cache)com 0ms de tempo de carregamento
No PageSpeed Insights, a auditoria “Serve static assets with an efficient cache policy” lista recursos sem cache configurado e o potencial de economia. Como o cache afeta o LCP, vale acompanhar a métrica junto do guia de Core Web Vitals.
Erros comuns de configuração de cache
A maior parte dos problemas de cache não vem da ferramenta, e sim da configuração. Os casos mais frequentes:
| Erro | Efeito | Correção |
|---|---|---|
| Cachear HTML por semanas | Visitante vê conteúdo antigo depois da publicação | max-age curto ou must-revalidate para HTML |
| Cachear CSS e JS sem hash no nome | Atualização não chega ao navegador | Incluir hash no build ou versionar por query string |
| Dois plugins de cache ativos no WordPress | Conflito de headers e páginas inconsistentes | Manter apenas um plugin de cache de página |
| Cachear páginas personalizadas na CDN | Um usuário vê dados de outro | Excluir páginas com login ou carrinho do cache de borda |
| Ignorar o cache do servidor | CDN rápida, mas origem lenta a cada miss | Ativar cache de página na origem também |
Imagens costumam ser os arquivos que mais se beneficiam de cache longo. Antes de guardar uma versão por um ano, confirme que ela já está com otimização de imagens aplicada.
Como conferir os headers na prática
Use o terminal para ver o que o servidor devolve:
curl -I https://seusite.com.br/assets/main.js
A resposta deve trazer Cache-Control, ETag e, quando aplicável, Age (tempo que o objeto está na CDN). Se Age for zero em um asset que deveria estar cacheado, a CDN não está guardando aquele tipo de arquivo.
No navegador, a aba Network do DevTools mostra (disk cache) ou (memory cache) na segunda visita. Se todos os assets continuam com status 200 e tempo de download, o cache não está funcionando.
Quando não usar cache
Carrinho, checkout, área logada e páginas que exibem dados do usuário não devem ser cacheadas em camada compartilhada. Nessas rotas, configure Cache-Control: private, no-store ou exclua a URL das regras da CDN. Cache errado em página de pagamento pode misturar dados entre clientes, o que é falha de segurança, não só de performance.
Seu site entrega conteúdo de forma eficiente?
Configuramos CDN e cache para o seu site - Cloudflare, headers corretos e estratégia de cache-busting incluídos.
Configurar CDN e cache do meu siteFontes e referências
- MDN: HTTP: referência de cabeçalhos e comportamento de cache.
- web.dev: Core Web Vitals: métricas e metas de experiência do usuário.
- web.dev: LCP: como o maior elemento visível afeta a percepção de velocidade.
FAQ
CDN gratuito do Cloudflare é suficiente para pequenas empresas?
Para a maioria dos sites de pequenas empresas no Brasil, sim. O plano gratuito do Cloudflare inclui CDN, compressão e proteção básica que já melhoram significativamente a performance. Planos pagos adicionam otimizações de imagem automática e cache mais avançado.
Preciso de CDN se meu site está em servidor no Brasil e meu público é brasileiro?
Para performance básica, pode não ser crítico. Mas o Cloudflare (mesmo com servidores em São Paulo) ainda traz benefícios: compressão automática, cache de borda, proteção DDoS e redução de carga no servidor de origem. Vale configurar mesmo com público local.
Cache pode quebrar o site se eu atualizar conteúdo?
O HTML deve ter cache curto ou de revalidação para que mudanças sejam vistas rapidamente. Assets estáticos (CSS, JS, imagens) podem ter cache longo se você usar estratégia de hash nos nomes de arquivo. A combinação das duas estratégias resolve o problema.
Meu site está no WordPress. Como configurar cache?
Instale WP Rocket (pago, mais completo) ou LiteSpeed Cache (gratuito se o servidor usar LiteSpeed/OpenLiteSpeed). Ambos configuram automaticamente cache de página, cache de browser via headers, e se integram com Cloudflare. Evite ter dois plugins de cache ativos simultaneamente.