Cache e CDN: acelere o site sem servir conteúdo antigo

Resposta direta: a estratégia mais segura é usar cache longo em arquivos estáticos versionados, como CSS, JavaScript e imagens com hash no nome; revalidar HTML e conteúdos que podem mudar; e impedir que respostas privadas sejam compartilhadas. Uma CDN reduz a distância até o visitante, mas só entrega velocidade consistente quando cabeçalhos, invalidação e variações estão corretos.

Cache não é apenas uma otimização. É uma política sobre por quanto tempo uma resposta pode ser reutilizada, por quem e em quais condições. Uma regra agressiva no arquivo certo acelera o site. A mesma regra aplicada a preço, estoque, sessão ou painel pode exibir informação antiga ou de outro usuário. O objetivo é classificar recursos antes de configurar prazos.

Como navegador, CDN e servidor trabalham juntos

O navegador mantém um cache privado no dispositivo. Proxies e CDNs podem manter cache compartilhado entre vários visitantes. O servidor de origem produz a resposta quando nenhuma camada pode reutilizá-la. Quanto mais perto a resposta válida estiver do usuário, menor tende a ser a latência e menor a carga no servidor.

O cabeçalho Cache-Control orienta essas camadas. max-age define por quanto tempo a resposta é considerada fresca. public permite armazenamento compartilhado quando apropriado. private restringe a reutilização ao cache privado. no-store pede que a resposta não seja armazenada. no-cache, apesar do nome, permite guardar, mas exige revalidar antes de reutilizar.

Essa diferença entre no-cache e no-store é importante. Usar no-store em todo HTML elimina benefícios e pode custar desempenho. Usar public em uma área autenticada pode criar risco de privacidade. A política deve refletir a natureza de cada rota.

Arquivos versionados merecem cache longo

Ao publicar um arquivo chamado app.abc123.js, a alteração do conteúdo gera outro nome. Como a URL muda, o arquivo antigo pode ficar armazenado por muito tempo sem impedir a atualização. Para esses recursos imutáveis, uma prática comum é max-age de um ano com immutable, desde que o pipeline realmente faça versionamento.

O mesmo vale para imagens processadas e folhas de estilo com hash. A página nova aponta para a URL nova; visitantes recorrentes mantêm arquivos iguais no cache. Isso reduz transferência, acelera renderização e torna deploys mais previsíveis.

Não aplique cache de um ano a app.js sem versão. Se o conteúdo mudar e a URL permanecer, usuários podem continuar recebendo o arquivo antigo. A invalidação na CDN ajuda, mas não apaga instantaneamente cada cache privado. A URL versionada é um contrato mais robusto.

HTML deve ser atual sem ser caro

HTML costuma mudar sem receber novo nome. Uma política de revalidação permite armazenar a resposta e perguntar ao servidor se ainda é válida. O servidor pode responder 304 Not Modified, sem reenviar todo o corpo. ETag identifica uma versão; Last-Modified usa a data de alteração. Ambos ajudam a economizar bytes, embora a viagem de rede ainda exista.

Para páginas institucionais com atualização controlada, uma CDN pode manter um tempo curto de frescor e revalidar ou receber purge após publicação. Para notícias ou estoque, a tolerância é menor. Para uma landing page que muda semanalmente, alguns minutos de cache podem ser aceitáveis. A decisão depende do custo de conteúdo vencido.

Quando usar stale-while-revalidate

A diretiva stale-while-revalidate permite servir temporariamente uma cópia vencida enquanto a atualização acontece em segundo plano. Ela reduz espera em páginas onde alguns segundos ou minutos de defasagem não causam dano. É inadequada para saldo, permissão, preço sensível, disponibilidade crítica ou mensagens legais urgentes.

O valor deve ser explícito. Primeiro vem a janela fresca; depois, a janela em que a resposta velha pode ser usada enquanto é revalidada. Fora delas, o cache precisa buscar conteúdo novo antes de responder.

O que nunca deve vazar pelo cache

Respostas personalizadas exigem cuidado: conta, carrinho, proposta, dados de CRM, histórico, token e qualquer conteúdo definido por cookie ou autorização. Use private ou no-store conforme a necessidade, impeça cache compartilhado e confira a configuração real da CDN.

O cabeçalho Vary informa que a resposta muda por uma característica da requisição, como Accept-Encoding. Variar por Cookie de modo amplo pode explodir o número de versões e destruir eficiência. É melhor separar rotas públicas de rotas autenticadas e minimizar variações.

Também verifique se a CDN respeita Authorization e Set-Cookie. Configurações personalizadas podem substituir padrões seguros. Faça testes com usuários diferentes e confirme que nenhuma resposta privada aparece para outro contexto.

CDN não corrige um site mal construído

Uma CDN aproxima arquivos, protege o servidor de picos e pode comprimir respostas. Ela não remove JavaScript excessivo, não reduz uma imagem gigante enviada ao celular e não corrige processamento pesado no navegador. Performance exige tamanho, prioridade, renderização e cache.

Comece pelo caminho crítico. HTML inicial, CSS essencial, fonte e imagem principal influenciam a percepção de velocidade. Scripts de terceiros podem bloquear interação mesmo quando chegam rapidamente da borda. Veja como controlar scripts de terceiros e como melhorar o INP de cliques e formulários.

Exemplo de política por tipo de recurso

CSS, JavaScript e imagens com hash

Use cache público longo e immutable quando o nome muda a cada conteúdo. Garanta que o HTML nunca aponte para arquivo inexistente durante o deploy.

HTML público

Use revalidação ou janela curta compatível com a frequência editorial. Combine ETag ou Last-Modified e purge de CDN quando uma atualização precisa aparecer imediatamente.

API pública

Defina a tolerância de defasagem por endpoint. Catálogo estável pode aceitar cache; disponibilidade e preço exigem prazos menores ou revalidação. Não use uma regra global para tudo.

Área autenticada

Prefira private ou no-store para respostas sensíveis. Separe assets públicos, que podem continuar com cache longo, dos dados do usuário.

Como validar no navegador e na linha de comando

No DevTools, abra Network, recarregue e observe Size, Status e cabeçalhos. Uma resposta pode aparecer como memory cache, disk cache ou 304. Desative cache apenas para diagnóstico, não como retrato do visitante recorrente. Teste uma navegação nova e outra repetida.

Com curl, inspecione headers de uma URL pública. Procure Cache-Control, Age, ETag, Last-Modified, Vary e sinais do provedor de CDN. Repita a requisição: Age pode crescer em uma resposta cacheada. Envie If-None-Match com a ETag para confirmar revalidação. Faça testes em produção e em staging, pois proxies e regras costumam diferir.

Depois de um deploy, confira se o HTML referencia os novos hashes e se os arquivos antigos continuam disponíveis durante transição. Um purge indiscriminado pode elevar carga de origem. Uma invalidação seletiva reduz impacto.

Relação entre performance e SEO

Sites rápidos favorecem navegação, rastreamento eficiente e conversão. Cache pode melhorar métricas percebidas e reduzir tempo de carregamento repetido. Porém, velocidade isolada não substitui conteúdo útil, arquitetura clara, indexabilidade e experiência. Para SEO, o HTML que buscadores recebem precisa estar correto e atual.

Evite servir a robôs uma versão diferente sem justificativa técnica. Se a CDN usa renderização ou regras de dispositivo, teste user agents e URLs canônicas. Mudanças em cache também devem preservar redirecionamentos, status e sitemap.

Na Open Leads, criação de sites é tratada junto de desempenho, mensuração e objetivo comercial. O cache é valioso quando reduz espera sem mascarar erros de origem ou comprometer atualização.

Checklist de cache e CDN

• Inventarie recursos estáticos, HTML, APIs e rotas privadas.
• Adote nomes versionados para assets de longa duração.
• Configure cache longo apenas em URLs imutáveis.
• Use ETag ou Last-Modified para revalidação quando adequado.
• Defina janelas de frescor conforme o risco de defasagem.
• Proteja dados personalizados com private ou no-store.
• Revise Vary, cookies e Authorization.
• Teste navegação nova, repetida e usuários diferentes.
• Planeje purge seletivo e rollback de deploy.
• Monitore métricas reais de usuários e erros de origem.

Erros comuns

O primeiro é confundir no-cache com proibição de armazenamento. O segundo é aplicar uma regra global a todos os arquivos. O terceiro é versionar query strings de forma inconsistente enquanto a CDN ignora parâmetros. O quarto é apagar tudo a cada deploy, criando picos. O quinto é confiar no painel do provedor sem conferir cabeçalhos no cliente.

Também é perigoso guardar HTML personalizado como público ou usar stale-while-revalidate em dados críticos. Finalmente, não trate um alto cache hit ratio como objetivo isolado. O que importa é resposta correta, rápida e segura.

Perguntas frequentes

CDN e cache são a mesma coisa?

Não. Cache é a reutilização de respostas. CDN é uma rede distribuída que pode armazená-las perto dos usuários e oferecer outros recursos.

no-cache impede o navegador de guardar o arquivo?

Não. Ele permite armazenamento, mas exige revalidação antes do uso. no-store é a diretiva voltada a não armazenar.

Quanto tempo devo cachear imagens?

Se a URL muda quando a imagem muda, pode usar período longo. Se a URL é reutilizada, escolha prazo menor ou revalidação.

stale-while-revalidate sempre melhora a experiência?

Ele reduz espera quando uma cópia levemente antiga é aceitável. Em dados críticos, a defasagem pode ser pior que a latência.

Preciso limpar a CDN em todo deploy?

Não se os assets são versionados. Invalide HTML ou rotas específicas quando necessário e mantenha arquivos antigos durante a transição.

Cache melhora Core Web Vitals?

Pode reduzir tempos de transferência e ajudar carregamentos repetidos, mas não resolve sozinho renderização, imagens, JavaScript ou responsividade.

Conclusão

Uma boa política torna o imutável duradouro, revalida o mutável e protege o privado. CDN amplifica essa estratégia ao aproximar conteúdo, não ao substituir engenharia. Classifique cada resposta, versione assets, teste cabeçalhos e planeje atualização. Para aplicar performance desde a arquitetura, veja os serviços de sites da Open Leads.

Quer transformar tráfego em oportunidades reais? A Open Leads integra mídia paga, mensuração e criação de sites focados em conversão. Conheça os serviços da Open Leads.

Fontes consultadas

Consulte os materiais originais usados na pesquisa deste artigo.

• Prevent unnecessary network requests with the HTTP Cache — web.dev
• Love your cache — web.dev
• Keeping things fresh with stale-while-revalidate — web.dev
• HTTP cache security — web.dev
• Service worker caching and HTTP caching — web.dev