Como funciona o cache do navegador?

O cache do navegador é um mecanismo usado pelos navegadores para armazenar localmente recursos de páginas da web. Isso adiciona ganhos de desempenho, minimiza o consumo de largura de banda e, em geral, cria uma experiência mais rápida. Neste artigo, explicamos como funciona o cache do navegador e como implementá-lo em seu site.

O que é o cache do navegador?

O cache é um componente de software ou hardware usado para armazenar valores temporariamente para acesso futuro mais rápido. O cache do navegador é um pequeno banco de dados de arquivos que contém recursos de páginas da Web baixados, como imagens, vídeos, CSS, Javascript e assim por diante. A ideia básica por trás disso é a seguinte:

O navegador solicita algum conteúdo do servidor web. Se o conteúdo não estiver no cache do navegador, ele será recuperado diretamente do servidor web. Se o conteúdo foi armazenado em cache anteriormente, o navegador ignora o servidor e carrega o conteúdo diretamente de seu cache.

O conteúdo é considerado obsoleto dependendo se o conteúdo em cache expirou ou não. Fresh, por outro lado, significa que o conteúdo não passou da data de validade e pode ser servido diretamente do cache do navegador sem envolver o servidor.

O termo validação refere-se ao conteúdo que precisa ser verificado em relação à versão mais recente que o servidor possui. Em suma, para determinar se o conteúdo é obsoleto ou não. A invalidação ocorre quando o conteúdo é removido do cache antes da data de expiração. Isso pode ser forçado pelo servidor, nos casos em que o conteúdo foi alterado, e o navegador precisa ter a versão mais recente para não apresentar problemas.

O cache do navegador pode ser aproveitado por desenvolvedores e administradores da Web por meio do uso de cabeçalhos HTTP específicos. Esses cabeçalhos instruem o navegador da Web quando armazenar em cache um recurso, quando não fazê-lo e por quanto tempo. O uso de cabeçalhos relacionados ao cache HTTP pode ser muitas vezes frustrante, pois há uma grande sobreposição de cabeçalhos nas várias reencarnações do protocolo HTTP. Adicione à mistura coisas como o proxy da Web estranho no meio, navegadores antigos, políticas e implementações de cache conflitantes (por exemplo, diferentes plugins do WordPress) e isso pode rapidamente se tornar uma dor de cabeça.

Cabeçalhos de cache do navegador

O conjunto de regras que definem o que pode ou não ser armazenado em cache e por quanto tempo é chamado de política de cache. Isso é implementado pelo proprietário do site por meio do uso de cabeçalhos de resposta em cache. Embora isso possa ser alcançado de muitas maneiras diferentes, você provavelmente deve se preocupar apenas com o controle de Cache, no início.

Controle de cache

O cabeçalho Cache-control foi introduzido no HTTP/1.1 e é considerado a implementação mais moderna que existe. Existem vários valores diferentes que você pode usar, dependendo de como você deseja que os navegadores se comportem. Tornando-o bastante versátil. Abaixo está uma lista de diretivas Cache-Control:

• Sem cache
  Instrui seu navegador da Web a não consultar o cache imediatamente, mas a validar o conteúdo no servidor. Se for fresco, pode ser servido a partir da cache.
• Sem loja
  Diz ao navegador para não armazenar o conteúdo em cache de forma alguma. É usado principalmente ao lidar com dados confidenciais ou com dados que mudam com frequência.
• Público
  Marca o conteúdo como público, o que significa que pode ser armazenado em cache pelo navegador e por quaisquer terceiros intermediários (como proxies, etc).
• Privado
  Usado para marcar o conteúdo como privado, ou seja, ele pode ser armazenado em cache apenas pelo navegador, e não por proxies intermediários e afins. Isso geralmente se refere a dados relacionados ao usuário.
• Idade máxima
  Max-age representa o tempo máximo em segundos que um conteúdo pode permanecer no cache do navegador antes que o cliente precise revalidar. Ao contrário do cabeçalho Expires que visitaremos em breve, max-age define um valor relativo em segundos a partir do momento em que o conteúdo foi armazenado em cache, e não uma data de expiração absoluta.
• S-maxage
  Isso é semelhante ao max-age, mas é usado apenas para caches intermediários.
• Revalidação obrigatória
  Força o navegador a revalidar o conteúdo sempre que precisar, em vez de apenas servi-lo diretamente do cache do navegador.
  Isso é útil no caso de ocorrer uma interrupção na rede.
• Revalidar proxy
  Semelhante ao must-revalidate, mas aplica-se apenas a caches intermediários.
• sem transformação
  Instrui o navegador a não transformar o conteúdo recebido do servidor de forma alguma (geralmente compactação, etc.).

Etag

O cabeçalho de resposta Etag é usado para identificar um recurso específico. Toda vez que um determinado recurso muda, uma nova Etag é gerada. Desta forma, economiza-se largura de banda, pois o servidor web não precisa dar uma resposta completa se a Etag não mudou. Conseqüentemente, o cabeçalho Etag é habilitado por padrão no Nginx e no Apache, e os valores Etag são gerados automaticamente, então você não precisa especificar nada.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Expira

Isso foi introduzido no HTTP/1.0 e define uma data específica no futuro em que o conteúdo será considerado obsoleto. É efetivamente uma data de validade para o conteúdo. Por exemplo, Expira: Qui, 25 de maio de 2017 12:30:00 GMT

Pragma

Este é um cabeçalho HTTP/1.0 um tanto desatualizado que é usado principalmente para compatibilidade com versões anteriores. A inserção de Pragma: no-cache fará com que seu navegador se comporte de maneira semelhante ao Cache-Control: no-cache .

Como implementar uma política de cache em seu site

Existem duas maneiras de implementar uma política de cache em seu site. A primeira é definir os cabeçalhos de resposta de armazenamento em cache na configuração do servidor web. A segunda é fazer isso diretamente dentro do PHP. Abaixo estão exemplos dos dois servidores web mais populares, Apache2 e Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Como você pode ver é bem simples. No primeiro exemplo, usamos a diretiva FileMatch do apache2 para corresponder a um conjunto específico de tipos de arquivo (.ico, .pdf, etc) e torná-los públicos, com uma idade máxima de 84600 segundos. No segundo, comparamos novamente com determinados tipos de arquivo usando a diretiva de localização do nginx e incluímos uma idade máxima de 365 dias. Também os definimos como “públicos” usando a cláusula add header.

PHP

Se você deseja adicionar cabeçalhos de resposta diretamente ao seu código, basta usar o comando header do PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Como testar para ver se funciona

Você pode testar facilmente para ver as regras de cache do seu navegador usando, por exemplo, o console da Web do Firefox ou as Ferramentas do desenvolvedor do Chrome:

1. Clique no ícone de hambúrguer no canto superior direito.
2. Selecione Mais ferramentas > Ferramentas do desenvolvedor
3. Digite seu URL na barra de endereço e pressione Enter.

Você deverá ver uma lista de solicitações enquanto seu URL está sendo carregado. Selecione um recurso clicando nele. Inspecione os cabeçalhos de resposta à direita e, particularmente, o código de status. Ele imprime o código HTTP 200, mas indica entre parênteses que é do cache de memória.

Isso significa que o recurso foi carregado automaticamente do armazenamento de cache local, em vez de solicitá-lo ao servidor.

Nos casos em que você tem uma cláusula “must-revalidate” em seu cabeçalho Cache-Control, o código de status será 304 (Não Modificado). Isso significa que seu navegador revalidou o recurso no servidor e o servidor respondeu que o conteúdo não foi alterado, portanto, ele pode ser servido a partir do cache do navegador.

Prossiga para desabilitar o cache marcando a caixa de seleção Desabilitar cache e pressionando Recarregar.

Nesse caso, você vê que o Código de Status é 200 sem nenhuma indicação de que usou o cache. O navegador solicitou o recurso do servidor da Web e o servidor da Web respondeu entregando uma nova cópia.

Conclusão

O cache do navegador e as políticas de cache podem se tornar bastante complicadas. Mas começar a experimentar o Cache-Control como demonstramos é simples. Na maioria das vezes, implementar uma política de cache “genérica” para ativos estáticos é suficiente para fazer a diferença no desempenho do seu site. No entanto, adiciona uma camada extra de “preocupação” em cima de tantas outras coisas, e acreditamos que não deveria ser assim. Siga-nos em nosso próximo post, onde mostraremos como implementamos o cache do navegador no Pressidium que faz com que toda essa preocupação desapareça.