O que é o controle de cache (cache-control)?

O que é o controle de cache (cache-control)? Cache-Control é um cabeçalho HTTP que define a quantidade de tempo e a forma como um arquivo deve ser armazenado em cache.

 

Cache de HTTP

Noções básicas de controle de cache:

Quando um arquivo é acessado por um navegador, os cabeçalhos (headers) HTTP também são recuperados. Quando o Cache-Control estiver incluído, o navegador respeitará os valores encontrados.

 

 

Se um navegador ver que um arquivo deve ser armazenado em cache por cinco minutos, ele permanecerá no cache do navegador por cinco minutos e esse arquivo não precisará ser recuperado se for chamado de novo.

Saiba quantos visitantes seu site está perdendo

 

Um exemplo pode ser a imagem do seu logotipo. Se um visitante chegar a uma das suas páginas, ele irá baixar a imagem do logotipo. Se o usuário passar para outra página da Web em seu site, a imagem do logotipo não será baixada novamente. Em vez disso, a versão em cache será usada.

 

Qual é max-age? Que o Google fala quando analisa seu site aqui:

“Max-age” define a quantidade de tempo em que um arquivo deve ser armazenado em cache.
A diretiva de resposta ” max-age /idade.maxima” indica que a resposta deve ser considerada obsoleta depois que a idade é maior do que o número especificado de segundos.

Max-age usage:

Se parece com isso: max-age=2592000
A idade máxima é expressa em segundos.

Os valores comuns de idade máxima são:

 

Um minuto: idade máxima = 60
Uma hora: idade máxima = 3600
Um dia: idade máxima = 86400
Uma semana: idade máxima = 604800
Um mês: idade máxima = 2628000
Um ano: idade máxima = 31536000

Quando usar max-age para definir seus tempos de cache, você deve considerar o tipo de arquivo e como ele é usado. Vamos discutir isso com mais detalhes mais adiante neste artigo.

 

 

Diretrizes de cache:

 

O The Cache-Control header acima indica “público”. Isso significa que este arquivo pode ser colocado em cache publicamente (em contraste com um arquivo privado).

Por padrão, a maioria das coisas são consideradas publicamente cacheáveis (podem ser armazenadas em cache), mas existem momentos em que esse comportamento não seria aconselhável para determinados documentos. Por questões de segurança.
Abrangeremos três diretrizes principais oferecidas pelo Cache-Control:

Público
Privado
No-store.

 

Público:

A diretriz “pública” basicamente está dizendo que qualquer pessoa pode armazenar em cache isso em qualquer nível. Em suma, se você quiser algo em cache por razões de velocidade de página, e não é privado ou sensível ao tempo, então você deve usar a diretiva pública.

Privado:

A diretiva privada significa que é específica para uma pessoa. Um exemplo seria uma página do Twitter. Quando você vai para o Twitter, você vê uma coisa e outra pessoa vê outra coisa. Embora a informação nessa página seja pública e não sensível, é específica para uma pessoa. (Nota: o Twitter é apenas um exemplo conceitual).

No-store:

A diretiva de no-store é a indicação mais forte de que algo nunca deve ser armazenado em qualquer mecanismo de cache.

 

Criar site de videos

Tipos de arquivo:

Duas perguntas que um webmaster deve fazer são:

Que tipos de arquivo devo armazenar em cache?

Por quanto tempo eu deveria armazená-los?

Que tipos de arquivo devem ser armazenados em cache?

Gostaria de salientar as seguintes coisas sobre certos tipos de arquivos …

Imagens – (png, jpg, gif, etc.) As imagens realmente não mudam para que elas possam ter um longo período de tempo de cache (por ano).

Os arquivos CSS – CSS tendem a mudar com mais frequência do que outros arquivos, um período de tempo menor pode ser necessário (semana ou mês).

Ico (favicon) – raramente alterado (um ano).

JS – Javascripts na maioria das vezes não estão mudando com muita frequência, então um tempo de cache mais longo normalmente é possível (um mês).

 

Como se certificar que seu site é compativel com dispositivos móveis.

Coisas a considerar:

Somente você pode determinar o que é melhor para o seu site e os recursos do seu site. Uma coisa que eu gostaria de mencionar é que, se você mudar algo (como um arquivo CSS) e esse arquivo é armazenado em cache, você deve considerar mudar o nome do arquivo para que seu arquivo CSS atualizado seja visto por todos os usuários.

 

Isso é chamado de impressão digital de URL.

Obter um recurso de arquivo novo (não em cache) é possível por ter um nome exclusivo. Um exemplo seria se o nosso arquivo css fosse chamado “main.css”, podemos nomeá-lo “main_1.css” em vez disso. Na próxima vez que mudarmos, podemos chamá-lo de “main_2.css”. Isso é útil para arquivos que mudam ocasionalmente.

Como adicionar Cache-Control em site:

A maneira de adicionar Cache-Control aos seus arquivos é a igual a maneira como se adiciona ao seu servidor.

Tudo sobre o qual falamos nesta página é sobre o header Cache-Control.

Então, como é adicionado?

Isso depende do seu servidor web. Passaremos pelos cenários mais comuns abaixo.

Arquivo .htaccess:

A maioria das pessoas que leem isso provavelmente usará o arquivo .htaccess para adicionar.

Exemplo de código para o arquivo .htaccess:

Header set Cache-Control “max-age=2628000, public”

 

O código acima, no entanto, não lhe dá qualquer capacidade de fornecer instruções de cache diferentes para diferentes tipos de arquivos.  Para aplicar diferentes Controle de Cache para diferentes tipos de arquivos, usaríamos.

 

# One month for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2628000, public”
</filesMatch>

O código acima é basicamente diz …

“Se o tipo de arquivo for css, jpeg, jpg, png, gif, js ou ico, aplique o seguinte para ele”.

Agora, digamos que queremos que as imagens sejam armazenadas em cache por um ano, mas mantenha os arquivos css e js em cache por um mês. Teríamos que colocar o seguinte no nosso arquivo .htaccess:

# One year for image files
<filesMatch “.(jpg|jpeg|png|gif|ico)$”>
Header set Cache-Control “max-age=31536000, public”
</filesMatch>

 

# One month for css and js
<filesMatch “.(css|js)$”>
Header set Cache-Control “max-age=2628000, public”
</filesMatch>

 

Acima temos dois blocos de código, um para imagens e um para arquivos css e js. Isso é apenas para ilustrar, que você pode ter vários blocos em seu arquivo .htaccess.

Apache config http.conf:

Se você tem acesso e sabe o que está fazendo, configurar header através do arquivo de configuração é mais rápido e recomendado. Os exemplos de código acima de .htaccess funcionarão como estão. Se seu site é WordPress tem sempre um plugin para fazer o serviço para você.

 

 

NGINX:

 

Usando a diretiva expira você pode adicionar instruções de cache para um servidor ou bloco de localização.

 

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

O código acima é para cada um dos tipos de arquivos listados na primeira linha. Esses tipos de arquivo podem ser adicionados ou removidos. Também pode haver vários blocos para ajustes de diferentes tipos de arquivos.

Litespeed:

Se você possui uma licença multipop, você terá acesso à diretriz de cache avançada através da configuração online.

Se você não possui uma licença multi-cpu, então você precisará usar o arquivo .htaccess para Cache-Control. As instruções acima para.htaccess funcionam para servidores Litespeed.

 

Fonte

Responda esse comentario

/* */