Sirva ativos estáticos com uma política de cache eficiente
Published on • Updated on
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:
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
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.
Um risco de configurar caches de longa duração é que seus usuários não verão atualizações para arquivos estáticos. Você pode evitar esse problema configurando sua ferramenta de build para incorporar um hash nos seus nomes de arquivos de ativos estáticos para que cada versão seja única, o que força o navegador a buscar sempre a nova versão do servidor. (Para aprender a incorporar hashes usando webpack, veja o Guia de cache do webpack.)
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(orCommand+Option+Jon 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
Updated on • Improve article