Disponibilize recursos estáticos com uma política de cache eficiente

O armazenamento em cache HTTP pode acelerar o tempo de carregamento da página em visitas repetidas.

Quando um navegador solicita um recurso, o servidor que fornece o recurso pode informar ao navegador por quanto tempo ele precisa armazenar ou armazenar em cache o recurso temporariamente. Para qualquer solicitação subsequente desse recurso, o navegador usa a cópia local em vez de recebê-la da rede.

Como a auditoria da política de cache do Lighthouse falha

O Lighthouse sinaliza todos os recursos estáticos que não estão armazenados em cache:

Captura de tela da auditoria "Oferecer recursos estáticos com uma política de cache eficiente" do Lighthouse

O Lighthouse considera um recurso em cache se todas as condições a seguir forem atendidas:

  • O recurso é uma fonte, imagem, arquivo de mídia, script ou folha de estilo.
  • O recurso tem um código de status HTTP 200, 203 ou 206.
  • O recurso não tem uma política explícita sem cache.

Quando uma página falha na auditoria, o Lighthouse lista os resultados em uma tabela com três colunas:

URL O local do recurso em cache
Cache TTL A duração atual do cache do recurso
Tamanho da transferência Estimativa dos dados que seus usuários salvariam se o recurso sinalizado tivesse sido armazenado em cache

Como armazenar recursos estáticos em cache usando o armazenamento em cache HTTP

Configure o servidor para retornar o cabeçalho de resposta HTTP Cache-Control:

Cache-Control: max-age=31536000

A diretiva max-age informa ao navegador por quanto tempo ele deve armazenar o recurso em cache em segundos. Este exemplo define a duração como 31536000, que corresponde a 1 ano: 60 segundos × 60 minutos × 24 horas × 365 dias = 31536.000 segundos.

Armazene em cache os recursos estáticos imutáveis por um longo período, como um ano ou mais.

Use no-cache se as mudanças no recurso e a atualização forem importantes, mas você ainda quiser aproveitar alguns dos benefícios de velocidade do armazenamento em cache. O navegador ainda armazena em cache um recurso definido como no-cache, mas verifica primeiro o servidor para confirmar se o recurso ainda está atual.

Uma duração de cache mais longa nem sempre é melhor. No final das contas, cabe a você decidir qual é a duração ideal do cache para seus recursos.

Há muitas diretivas para personalizar a forma como o navegador armazena em cache diferentes recursos. Saiba mais sobre o armazenamento em cache de recursos em O cache HTTP: seu guia de primeira linha de defesa e Configurar o comportamento de armazenamento em cache HTTP.

Como verificar respostas em cache no Chrome DevTools

Para saber quais recursos o navegador está recebendo do cache, abra a guia Rede no Chrome DevTools:

  1. Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir as Ferramentas para desenvolvedores.
  2. Clique na guia Rede.

A coluna Tamanho no Chrome DevTools pode ajudar a verificar se um recurso foi armazenado em cache:

A coluna "Tamanho".

O Chrome serve os recursos mais solicitados do cache de memória, que é muito rápido, mas é apagado quando o navegador é fechado.

Para verificar se o cabeçalho Cache-Control de um recurso está definido conforme o esperado, confira os dados do cabeçalho HTTP:

  1. Clique no URL da solicitação, na coluna Name da tabela "Requests".
  2. Clique na guia Cabeçalhos.
Como inspecionar o cabeçalho Cache-Control pela guia "Headers"
Inspectando o cabeçalho Cache-Control pela guia Headers.

Orientações específicas para a pilha

Drupal

Defina a Idade máxima para cache de navegador e proxy na página Administração » Configurações » Desenvolvimento. Leia sobre cache do Drupal e otimização de performance.

Joomla

Consulte Cache.

WordPress

Consulte Armazenamento em cache do navegador.

Recursos