Sirva ativos estáticos com uma política de cache eficiente
O 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 dizer ao navegador quanto tempo ele deve armazenar o recurso temporariamente em cache. Para qualquer solicitação subsequente desse recurso, o navegador usa sua cópia local em vez de obtê-la da rede.
Como falha a auditoria da política de cache do Lighthouse #
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 seguintes condições forem atendidas:
- O recurso é uma fonte, imagem, arquivo de mídia, script ou folha de estilo.
- O recurso possui um código de status HTTP
200,203ou206. - O recurso não tem uma política explícita de no-cache.
Quando uma página falha na auditoria, o Lighthouse lista os resultados numa tabela com três colunas:
Como armazenar recursos estáticos em cache usando o cache HTTP #
Configure seu servidor para retornar o cabeçalho de resposta HTTP Cache-Control
Cache-Control: max-age=31536000A diretiva max-age informa ao navegador quanto tempo ele deve armazenar o recurso em segundos. Este exemplo define a duração para 31536000, que corresponde a 1 ano: 60 segundos × 60 minutos × 24 horas × 365 dias = 31536000 segundos.
Quando possível, armazene em cache ativos estáticos imutáveis por um longo tempo, como um ano ou mais.
Use no-cache se o recurso mudar e a atualização for importante, mas você ainda deseja obter 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 com o servidor para ter certeza de que o recurso está atualizado.
Uma duração de cache mais longa nem sempre é melhor. Em última análise, cabe a você decidir qual é a duração ideal do cache para seus recursos.
Existem muitas diretivas para personalizar como o navegador armazena em cache diferentes recursos. Saiba mais sobre recursos de cache no guia Cache HTTP: sua primeira linha de defesa e no codelab Configurando o comportamento de cache em HTTP .
Como verificar respostas em cache no Chrome DevTools #
Para ver quais recursos o navegador está obtendo de seu cache, abra a guia Rede no Chrome DevTools:
- Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
- Click the Network tab.
A coluna Tamanho no Chrome DevTools pode ajudá-lo a verificar se um recurso foi armazenado em cache:
O Chrome fornece os recursos mais solicitados do cache de memória, que é muito rápido, mas é esvaziado quando o navegador é fechado.
Para verificar se o cabeçalho Cache-Control de um recurso está definido conforme o esperado, verifique os dados do seu cabeçalho HTTP:
- Clique na URL da solicitação, na colunaNome da tabela Solicitações.
- Clique na aba Cabeçalhos.
Cache-Control por meio da aba Headers.Orientações específicas para diferentes pilhas #
Drupal #
Defina a idade máxima do navegador e do cache do proxy na página Administração > Configuração > Desenvolvimento. Veja Recursos de desempenho do Drupal.
Joomla #
Veja Cache.
WordPress #
Veja Cache do navegador.
Recursos #
- Código-fonte para a auditoria Sirva ativos estáticos com uma política de cache eficiente
- Especificação do Cache-Control
- Cache-Control (MDN)