Sirva ativos estáticos com uma política de cache eficiente

Published on Updated on

Translated to: English, Español, 한국어, Pусский

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:

Uma captura de tela da auditoria Lighthouse Sirva ativos estáticos com uma política de cache eficiente

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, 203 ou 206.
  • 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:

URLA localização do recurso armazenável em cache
Cache TTLA duração atual do cache do recurso
TamanhoUma estimativa dos dados que seus usuários salvariam se o recurso sinalizado tivesse sido armazenado em cache

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=31536000

A 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:

  1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  2. Click the Network tab.

A coluna Tamanho no Chrome DevTools pode ajudá-lo a verificar se um recurso foi armazenado em cache:

A coluna Tamanho.

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:

  1. Clique na URL da solicitação, na colunaNome da tabela Solicitações.
  2. Clique na aba Cabeçalhos.
Inspecionando o cabeçalho Cache-Control por meio da aba Cabeçalhos
Inspecionando o cabeçalho 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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.