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:

  1. Crie conta em cloudflare.com
  2. Adicione seu domínio
  3. Troque os nameservers no seu registrador
  4. 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.css
  • main.js → main.7bc9f.js

Ferramentas de build como Vite, Webpack e Parcel fazem isso automaticamente.

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.

Performance Web

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 site

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.