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 o fornece pode informar ao navegador por quanto tempo ele deve armazenar temporariamente ou armazenar em cache o recurso. Para qualquer solicitação subsequente para esse recurso, o navegador usará a cópia local em vez de acessá-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 são armazenados em cache:

Uma captura de tela do Lighthouse Serve recursos estáticos com uma auditoria eficiente da política de cache

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

  • O recurso é uma fonte, uma imagem, um arquivo de mídia, um script ou uma 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 é reprovada na auditoria, o Lighthouse lista os resultados em uma tabela com três colunas:

URL O local do recurso armazenável em cache
TTL do cache A duração atual do cache do recurso
Tamanho da transferência Uma estimativa dos dados que os 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 o recurso deve ser armazenado 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 ativos estáticos imutáveis por um longo período, como um ano ou mais.

Use no-cache se o recurso mudar e a atualização for importante, mas você ainda quiser 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 garantir que o recurso ainda está atual.

Uma duração de cache mais longa nem sempre é melhor. Em última análise, depende de você decidir qual é a duração ideal do cache para seus recursos.

Existem muitas diretivas para personalizar o modo como o navegador armazena diferentes recursos em cache. Saiba mais sobre recursos de armazenamento em cache em O cache HTTP: guia de primeira linha de defesa e Como configurar o comportamento de armazenamento em cache HTTP.

Como verificar respostas armazenadas em cache no Chrome DevTools

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

[comment]: <> (a lista a seguir era um shortcode do web.dev, mas não foi traduzido do inglês para nenhum idioma.) 1. Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir o DevTools. 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 disponibiliza 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 Nome da tabela "Solicitações".
  2. Clique na guia Cabeçalhos.
Como inspecionar o cabeçalho Cache-Control pela guia &quot;Cabeçalhos&quot;
Como inspecionar o cabeçalho Cache-Control pela guia Cabeçalhos.

Orientações específicas para a pilha

Drupal

Defina Idade máxima do cache do navegador e do proxy na página Administração > Configuração > Desenvolvimento. Consulte Recursos de desempenho da Drupal.

Joomla

Consulte Cache.

WordPress

Consulte Armazenamento em cache do navegador.

Recursos