Módulo 1 · 5 de 7

Cache e cookies: por que o site lembra de você

Leitura: ~4 min

O computador que aprende a não perguntar de novo

Você já reparou que a segunda vez que você abre um site, ele carrega mais rápido que a primeira? Ou que o e-commerce lembra o que você deixou no carrinho ontem? Ou que o YouTube já sabe que você prefere dark mode? Nada disso é mágica. Tudo tem a ver com dois mecanismos que rodam silenciosamente no seu navegador: cache e cookies.

Antes de explicar cada um, uma analogia para fixar. Imagina que toda vez que você precisa de um número de telefone, você liga para um amigo e pede. Funciona, mas é lento. Agora imagina que você anota esse número em um papel e guarda na gaveta. Da próxima vez, você não precisa ligar, é só olhar na gaveta. O cache é essa gaveta. O computador salva uma cópia das informações que já buscou para não precisar pedir de novo.

Cache: a cópia local que acelera tudo

Quando você acessa um site pela primeira vez, o navegador precisa buscar tudo no servidor: o HTML e o CSS (a estrutura e o visual da página, que você vê a fundo no Módulo 2), as imagens, as fontes. Cada uma dessas coisas é um pedido separado ao servidor. Em um site complexo, podem ser centenas de pedidos simultâneos.

Depois dessa primeira visita, o navegador guarda uma cópia local desses arquivos. Isso é o cache. Da próxima vez que você acessar o mesmo site, o navegador verifica: "eu já tenho isso salvo? Ainda está atualizado?". Se sim, ele usa a cópia local em vez de pedir de novo para o servidor. O resultado? A página carrega muito mais rápido.

Você já deve ter ouvido um dev falar "limpa o cache" quando algo não está funcionando. Agora você sabe o que isso significa: deletar as cópias locais para forçar o navegador a buscar tudo de novo no servidor. É como jogar fora seus papéis anotados e ligar de novo para todos os contatos.

1a visita: busca tudo Navegador HTML, CSS, imagens... Servidor 2a visita: usa o cache Navegador Cache local Servidor (só se mudou) Resultado: carregamento mais rápido "Limpar cache" = apagar as cópias locais e buscar tudo de novo
Na primeira visita, o navegador busca tudo do servidor. Nas seguintes, usa o cache local e só verifica o que mudou.

Cookies: os bilhetinhos que o site deixa no seu computador

Cookies são pequenos arquivos de texto que os sites salvam no seu navegador. Diferente do cache (que guarda cópias de arquivos para acelerar o carregamento), cookies guardam informações sobre você.

Quando você faz login em um site e marca a caixinha "Lembrar de mim", o site salva um cookie no seu navegador dizendo "este usuário já se autenticou". Na próxima visita, o site lê esse cookie e te mantém logado(a). Quando um e-commerce mostra "Você deixou 3 itens no carrinho", ele está lendo um cookie que identifica você (ou a sua sessão). Os itens em si costumam ficar guardados no banco de dados, aquele estoque que você viu na primeira página deste módulo; o cookie é só o crachá que permite ao site te reconhecer e buscar seu carrinho lá. É por isso que, se você tem conta, o carrinho aparece até quando você loga em outro dispositivo. Carrinhos de visitantes sem login às vezes vivem só no navegador, mas o padrão para quem está logado(a) é o servidor.

Cookies também são usados para personalização. O site pode salvar suas preferências de idioma, de tema (claro ou escuro), de moeda. E, sim, cookies também são usados para rastreamento. Quando você pesquisa "tênis de corrida" e depois vê anúncios de tênis em todos os sites, isso são cookies de rastreamento compartilhando informações entre plataformas de publicidade.

Por que isso importa para você como designer?

Cache e cookies afetam diretamente decisões de design que você toma todos os dias:

  • Estados de carregamento: se o cache está funcionando, a segunda visita pode ser quase instantânea. Mas a primeira visita vai ser mais lenta. Você projeta os dois cenários?
  • "Lembrar de mim": aquele checkbox no login? Ele controla um cookie. Sem ele, o usuário precisa digitar a senha toda vez.
  • Personalização: se o site muda o tema baseado na preferência do usuário, essa preferência está salva em um cookie. Você, designer, decide que essa personalização existe, e o dev implementa via cookie.
  • Banners de cookie: aqueles banners de "Este site usa cookies. Aceitar ou configurar?" que você vê em todo site? Eles existem por causa da LGPD (Lei Geral de Proteção de Dados) no Brasil e regulamentações similares em outros países. Alguém precisa projetar esses banners. E esse alguém é você.
  • Informação desatualizada: se o cache serve uma versão antiga da página, o usuário pode ver informação errada. Isso gera confusão e tickets de suporte. O designer pode ajudar projetando indicadores visuais de atualização.

Privacidade: o elefante na sala

Cookies de rastreamento viraram um tema sensível. A LGPD no Brasil e o GDPR na Europa exigem que sites informem quais cookies usam e peçam consentimento do usuário para os cookies não essenciais, como os de rastreamento, publicidade e analytics. Cookies estritamente necessários para o site funcionar (o que mantém sua sessão de login ativa, o carrinho de compras) dispensam esse consentimento, mas ainda precisam ser informados. É por isso que quase todo site hoje tem um banner de cookies.

Como designer, você precisa pensar nesse banner não como um incômodo, mas como uma decisão de UX: onde ele aparece, quão fácil é recusar cookies, se o site funciona bem sem eles. Muitos sites tornam difícil recusar cookies de propósito, o que é uma péssima prática de UX e, em alguns casos, uma violação da lei.

Checagem rápida

Sem nota, sem pressão. Responda de cabeça e depois abra para conferir.

Um colega jura que cache e cookie são a mesma coisa. Onde ele está errando?

São coisas diferentes. O cache guarda cópias locais de arquivos (HTML, CSS, imagens, fontes) para o site carregar mais rápido na próxima visita. O cookie guarda pequenas informações sobre você (login, preferências, sessão) para o site te reconhecer. Um acelera o carregamento, o outro lembra quem você é.

O suporte pede para o usuário "limpar o cache" porque ele continua vendo uma versão antiga da página. O que isso faz na prática?

Apaga as cópias locais que o navegador guardou, forçando ele a buscar tudo de novo no servidor. Como o cache pode servir uma versão desatualizada, limpar obriga o navegador a baixar a versão nova. É como jogar fora seus papéis anotados e ligar de novo para todos os contatos.