16

Olá, testei um site que estou fazendo no PageSpeed Insights do Google, e ele sugere "Aproveitar cache do navegador".

Queria saber se realmente é necessário e vantajoso armazenar arquivos em cache, ou se coloco apenas essa tag?

<meta http-equiv="Cache-control" content="no-cache">
1
  • Você ainda não escolheu uma resposta para sua pergunta
    – durtto
    Commented 3/03/2017 às 11:23

3 Respostas 3

19
+50

Não adianta muito esta meta-tag, ela funciona geralmente apenas pro HTML, o que o PageSpeed Insights sugere é guardar o cache de arquivos chamados via <script>, <link>, <img>, <video>, background-image: url(...) como imagens, javascript, css, fontes, video, etc.

Nota:
O uso de no-cache quer dizer que não vai guardar no cache e o que você deseja é o contrário de

<meta http-equiv="Cache-control" content="no-cache">

Respondendo a pergunta, sim é muito vantajoso usar cache, isto vai diminuir o consumo do seu servidor tornando o tempo de resposta melhor e evitando possíveis travamentos do servidor quando tem um volume alto de acessos, pois serão menos requisições devido ao cache do "lado cliente".

É possível fazer usando Apache (pelas suas outras perguntas acredito que use PHP e este geralmente usa servidores Apache), você pode então fazer o uso do .htaccess, crie o arquivo .htaccess na pasta raiz do teu site (por exemplo public_html ou /etc/www) e coloque o seguinte conteúdo nele:

 #Cache de 1 mês a partir da data de acesso do arquivo
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
   ExpiresDefault "access plus 1 mouth"
</FilesMatch>

Isto vai fazer o cache de 1 mês pros arquivos do tipo ico, gif, jpg, jpeg, png, css e js.

Além do cache existe um código HTTP chamado 304, pra usar ele você precisa comparar o seu cache do navegador com o arquivo do servidor através da data de modificação ou através do Etag como eu expliquei nesta pergunta:

No back-end o servidor ou aplicação compara o header da requisição (ou Etag) e se não houver modificação o 304 Not modified é emitido e não é enviado dados na resposta, pra evitar fazer o download novamente do arquivo acaso não haja mudanças, então o navegador reaproveita novamente o cache da máquina local (navegador).

Então o seu .htaccess poderia ficar assim pra usar o 304:

# Trabalha o if-modified-since com arquivos de imagem
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
    # Cache para um mês
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 1 mouth"
    </IfModule>

    # Remove Etag para previnir o uso do mesmo
    # Pois iremos trabalhar com if-modified-since e last-modifed
    FileETag None
</FilesMatch>

Você também pode definir um tempo de expiração diferente pra cada tipo de arquivo, vamos supor que o seu site atualiza 1 vez por semana as imagens, mas os css e js levam raramente e o favicon dificilmente será atualizado, pode fazer assim:

# Ativa o cache
<FilesMatch "\.(?i:ico|gif|jpe?g|png|css|js|svg)$">
    <IfModule mod_expires.c>
        ExpiresActive On
    </IfModule>

    FileETag None
</FilesMatch>

# Cache de 1 semana pras imagens
<FilesMatch "\.(?i:gif|jpg|jpeg|png)$">
    <IfModule mod_expires.c>
        ExpiresDefault "access plus 1 mouth"
    </IfModule>
</FilesMatch>

# Cache de 1 ano pros icones (geralmente favicon)
<FilesMatch "\.(?i:ico)$">
    <IfModule mod_expires.c>
        ExpiresDefault "access plus 1 year"
    </IfModule>
</FilesMatch>

# Cache de 6 meses pra arquivos js e css
<FilesMatch "\.(?i:css|js)$">
    <IfModule mod_expires.c>
        ExpiresDefault "access plus 6 mouths"
    </IfModule>
</FilesMatch>

# Remove o Etag no final
<FilesMatch "\.(?i:ico|gif|jpg|jpeg|png|css|js|svg)$">
    FileETag None
</FilesMatch>

Vale notar que eu usei access plus, isso quer dizer que o tempo de cache é a contado assim por exemplo:

data e hora do acesso (requisição ao arquivo) + 6 meses = data que vai expirar o cache

Existe o modified plus que funciona assim:

data e hora da última modificação do arquivo no servidor + 6 meses = data que vai expirar o cache

Eu não usei o modified plus pois se o arquivo for antigo (não tiver sido modificado) ele não gera cache.

10
  • 1
    Obrigado pela resposta Guilherme! Nesse site não uso PHP, então crio o arquivo .htacess igual?
    – JefSilva
    Commented 27/06/2016 às 15:24
  • 1
    @JefSilva O php não tem relação com a solução, só citei ele pra presumir que você usava apache, se usa apache então .htaccess vai funcionar, se não usa apache informe qual tipo de servidor usa, é IIS, Ngnix ou lightTPD?
    – Syzoth
    Commented 27/06/2016 às 15:26
  • Heheh....Tava dizendo ali que deseja o contrário, mas num tem um exemplo de como seria esse contrário
    – MagicHat
    Commented 31/07/2016 às 0:42
  • 1
    @MagicHat faltou o "de" no meu comentário, eu estava fazendo uma referencia ao código do AP, o contrário disto é usar .htacces ou equivalente ;)
    – Syzoth
    Commented 31/07/2016 às 0:44
  • 1
    Legal, como usar isso no próprio HTML ao invés do .htacces ? é somente alterar o valor do content/Cache-control. e o valor faz o resto automático ou há mais configurações a serem feitas?
    – MagicHat
    Commented 31/07/2016 às 0:45
5

Arquivos em cache melhoram o desempenho da apresentação do seu site, uma vez que o usuário quando acessar uma pagina e contiver um elemento na mesma como uma imagem por exemplo, essa imagem será baixada somente uma vez, a proxima vez que o mesmo acessar a pagina a imagem em cache que será exibida ao invés de fazer o download da imagem novamente. Só não esquecer que ao trocar elementos das paginas e inserir outros trocar os nomes do mesmo, pois se o usuario armazenar em cache um elemento e for trocado esse elemento e o mesmo permanecer com o mesmo nome, novamente a imagem que será carregada será a do cache e não a do servidor fazendo que o elemento fique desatualizado. https://www.java.com/pt_BR/download/help/webcache.xml Segue um link de nexo com informações de cache.

3
  • 1
    Olá @DouglasAmerico seja bem vindo ao StackOverflow. A sua dúvida não ficou bem explícita, recomendo que passe primeiramente pelo tour do SO. pt.stackoverflow.com/tour Commented 27/11/2015 às 18:12
  • esse post é a resposta e não a dúvida, mas realmente precisa dar uma melhorada na resposta
    – Leandro RR
    Commented 28/03/2016 às 14:57
  • Se você apontar seus scripts para cdn irá ajudar neste sentido de cache pois quando os visitantes acessam o site irão buscar no cdn e que em muitos casos já estão em cache também, veja explicação detalhada: gocache.com.br/tag/seo
    – Almeida
    Commented 10/11/2016 às 11:30
3

Com certeza existe uma vantagem muito grande em salvar os arquivos do seu site no cache, assim o carregamento e a banda gasta pelo usuário para acessar o seu site será melhor. Porem, usar essa tag não vai ser o suficiente, ela basicamente não te da nenhum controle do cache de forma programável, o que infelizmente ainda vai acabar te levando a algum problema de versão. Se você quiser utilizar o cache e fazer isso de forma programável e inteligente, eu te aconselho a aprender sobre service worker. Service Worker é um JS que ficaram salvo no browser do usuário e atuara de forma "meio proxy", possibilitando que você manipule como, e o que, os arquivos serão salvos e carregados no cache, fazendo verificações de atualização e permitindo que o usuário possa acessar o seu site mesmo que ele esteja totalmente off-line.

Service Worker: https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

Um facilitador para a criação de um service worker: https://github.com/GoogleChrome/sw-toolbox

#UseThePlatform

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .