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:
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
ou206
. - 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:
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:
- Clique no URL da solicitação, na coluna Nome da tabela "Solicitações".
- Clique na 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.