Entenda como diferentes camadas de cache interagem no seu site e aprenda a otimizá-las para melhorar a performance e a experiência do usuário, evitando conflitos que podem custar caro.
Entenda o Cache do Seu Site: Mais Camadas, Mais Complexidade
Para donos de empresa e gestores de marketing, a performance do site é crucial. Páginas rápidas significam mais vendas, melhor SEO e usuários satisfeitos. Mas o que acontece quando diferentes sistemas de cache, como CDN, navegador e o próprio servidor, não conversam entre si? A realidade é que a performance pode ser comprometida, e o custo operacional, elevado.
Recentemente, uma análise detalhada de 72 páginas de um site mostrou como três caches diferentes atuavam com políticas distintas: doze dias no cache de borda (CDN), 180 segundos no roteador do Next.js, e zero segundos no cache HTTP do navegador. Essa falta de alinhamento levanta questões importantes sobre como seu site está entregando conteúdo e o que isso significa na prática.
Cache de Borda (CDN): O Guardião de Longo Prazo
O cache de borda, geralmente gerenciado por uma CDN (Content Delivery Network), é a primeira linha de defesa para a velocidade do seu site. Ele armazena cópias das suas páginas em servidores distribuídos globalmente, entregando-as rapidamente aos usuários com base em sua localização geográfica. No caso analisado, 70 das 72 páginas públicas eram pré-renderizadas e mantidas no cache de borda por mais de doze dias (1.052.273 segundos).
Este tempo de retenção elevado não é uma política de cache configurada, mas sim um registro de implantação. Ele indica quando a última versão do site foi construída e implantada, e o cache de borda tem servido os mesmos bytes desde então. Para páginas estáticas ou que mudam pouco, isso é ideal, pois garante entrega rápida e reduz a carga no servidor de origem.
Cache do Navegador: O Dilema do "Zero Segundos"
A política de cache do navegador é um dos pontos mais críticos para a experiência do usuário em visitas repetidas. No exemplo estudado, a maioria das páginas tinha a diretiva cache-control: public, max-age=0, must-revalidate. Isso significa que, embora o navegador possa armazenar a resposta, ele é instruído a não usá-la sem antes verificar com o servidor se houve alguma atualização.
- Impacto prático: Toda vez que um usuário navega para uma página pré-renderizada, ou mesmo a recarrega após um minuto, o navegador faz uma requisição à rede.
- A solução: O mecanismo que "salva" a visita repetida é o ETag. Com um ETag de 16 caracteres, o navegador pode enviar uma requisição condicional (
If-None-Match). Se o conteúdo não mudou, o servidor responde com um status 304 (Not Modified) e um corpo de resposta de zero bytes, economizando largura de banda e tempo de carregamento.
No entanto, duas páginas (a página inicial e a de preços, que leem o país do visitante para exibir a moeda correta) não tinham ETag. Isso significa que, a cada visita, a página completa de 16.8 KB era baixada, resultando em um custo de performance e dados significativo para o usuário e para o servidor.
A ausência de um cabeçalho Last-Modified também foi notada. Embora o sitemap do site contivesse a data da última modificação de cada página, essa informação não era passada ao navegador, impedindo o uso de requisições condicionais baseadas em data.
Cache do Roteador (Next.js): O Nível Intermediário
Além dos caches de borda e do navegador, existe uma terceira camada: o cache do roteador no lado do cliente. No caso do Next.js, a configuração x-nextjs-stale-time: 180 indica que as páginas estáticas são armazenadas por três minutos (180 segundos) no cache do roteador do lado do cliente.
- Como funciona: Uma vez dentro do aplicativo, as navegações entre páginas podem não tocar a rede, pois o roteador mantém a carga útil.
- Conteúdo do cache: O que é armazenado não é o HTML completo, mas sim o payload dos React Server Components (RSC), que é menor (42.653 bytes contra 81.952 bytes do documento HTML). Este payload é cacheado separadamente na borda, otimizando ainda mais a entrega.
O cabeçalho Vary, com valores como rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, garante que diferentes combinações de requisições (por exemplo, a primeira visita que obtém um documento HTML vs. navegações subsequentes que obtêm um fluxo de componentes) resultem em entradas de cache distintas na CDN.
Para entender melhor como as integrações entre ferramentas podem otimizar o seu site, confira nosso artigo sobre integrações seamless.
Compressão: O Impacto Silencioso na Performance
A compressão é um fator muitas vezes subestimado, mas que tem um impacto gigantesco na performance. No estudo de caso, a compressão Brotli reduziu o tamanho total do site em 6.28 vezes. Páginas maiores, como a inicial (150.476 bytes para 16.801 bytes com Brotli), mostraram uma redução ainda mais expressiva (8.96 vezes menor).
- Benefício: Menos bytes para baixar significa carregamentos mais rápidos e menor consumo de dados para o usuário, o que é especialmente importante em conexões mais lentas ou planos de dados limitados.
- Alerta: A página inicial, que era a maior e mais difícil de comprimir, não podia ser revalidada com um ETag. Isso significa que, mesmo com compressão, seus 16.8 KB eram pagos integralmente a cada visita, por cada visitante, inclusive os que retornavam em questão de minutos.
Essa análise destaca por que o "KB de HTML" por si só é uma métrica insuficiente para avaliar a performance. A combinação de compressão eficaz e políticas de cache inteligentes é o que realmente faz a diferença.
Para otimizar ainda mais o desempenho do seu site, explore nosso guia prático sobre como reduzir JavaScript.
O Que Mudar na Prática para o Seu Site
A principal lição aqui é a necessidade de harmonizar as políticas de cache em todas as camadas. Conflitos ou ausência de mecanismos de revalidação geram custos desnecessários e degradam a experiência. Veja o que pode ser feito:
- ETags para páginas dinâmicas: Páginas que geram conteúdo por requisição (como a de preços que ajusta a moeda) são o maior gargalo. Embora a geração de um ETag para rotas dinâmicas possa ser complexa (exigindo renderização para string antes da resposta), o benefício de evitar o download completo da página a cada visita é enorme.
- Cabeçalho Last-Modified: Adicionar o cabeçalho
Last-Modified, embora pareça simples, pode ser problemático se a data de modificação for a data de build, e não a data de alteração do conteúdo. Um hash de conteúdo que muda apenas quando o conteúdo muda é uma solução superior e já está presente no ETag. - Auditoria de Cache: Realize auditorias periódicas nos cabeçalhos de resposta do seu site. Ferramentas como
curl -sIpodem revelar as políticas de cache em vigor para cada página, permitindo identificar gargalos e oportunidades de otimização.
Otimizar o cache não é apenas sobre velocidade; é sobre eficiência e custo-benefício. Garantir que seu site entregue o conteúdo da forma mais inteligente possível é um investimento direto na satisfação do cliente e no sucesso do seu negócio. Quem quer um site bem feito desde o primeiro pixel costuma terceirizar com agencias especializadas como a UP Developer.
Perguntas frequentes
O que é cache de borda e como ele afeta meu site?
Cache de borda é o armazenamento de cópias do seu site em servidores de uma CDN próximos aos usuários. Ele acelera a entrega de conteúdo, reduzindo a latência e a carga no seu servidor principal, o que melhora a performance e a experiência do usuário.
Por que o cache do navegador com "max-age=0" é um problema?
Quando o navegador é instruído com "max-age=0, must-revalidate", ele precisa verificar com o servidor se o conteúdo foi atualizado a cada visita, mesmo que o usuário já tenha visto a página. Isso gera uma requisição de rede desnecessária, embora menor, que pode atrasar o carregamento.
O que é ETag e qual sua importância para o cache?
ETag é um identificador único para uma versão específica de um recurso. Ele permite que o navegador faça uma requisição condicional ao servidor. Se o ETag for o mesmo, o servidor responde com um status 304, indicando que o conteúdo não mudou e o navegador pode usar sua cópia em cache, economizando largura de banda.
Como a compressão de dados impacta a performance do site?
A compressão, como Brotli ou Gzip, reduz o tamanho dos arquivos enviados pelo servidor para o navegador. Isso significa menos dados para baixar, resultando em carregamentos de página mais rápidos, menor consumo de dados para o usuário e melhor performance geral, especialmente em conexões lentas.
Fonte: DEV Community
