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:
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,203ou206. - 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:
- Pressione
Control+Shift+J(ouCommand+Option+Jno Mac) para abrir as Ferramentas para desenvolvedores. - Clique na guia Rede.
A coluna Tamanho no Chrome DevTools pode ajudar a verificar se um recurso foi armazenado em cache:
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:
- Clique no URL da solicitação, na coluna Name da tabela "Requests".
- Clique na guia Cabeçalhos.
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.