7

Eu analisei meu site novo no Google PageSpeed Insights, fiz algumas correções, e agora preciso cachear alguns arquivos(CSS e JS) no navegador.

Procurei alguns artigos/perguntas no Stack Overflow mas não consegui entender como cachear arquivos especificos. O resultado da análise é esse aqui. Em especial, ele diz:

Aproveitar cache do navegador

A definição de uma data de validade ou de uma idade máxima nos cabeçalhos de HTTP para recursos estáticos instrui o navegador a carregar os recursos transferidos anteriormente a partir do disco local e não por meio da rede.

Eu entendi que isso se configura no web.config, mas não entendi como apontar apenas arquivos específicos. Gostaria pelo web.config e não dentro da página HTML.

9
  • Você poderia incluir o que o Google disse sobre o seu site na pergunta ("A definição de uma data de validade ou de uma idade máxima nos cabeçalhos de HTTP para recursos estáticos instrui o navegador a carregar os recursos transferidos anteriormente a partir do disco local e não por meio da rede") Eu faria isso, mas considero sempre melhor que o próprio autor coloque informação desse tipo. Commented 5/07/2017 às 13:46
  • Renan, basicamente esse é o objetivo da pergunta, eu não consigo achar onde configuro isso. Commented 5/07/2017 às 13:48
  • 1
    Minha sugestão: os navegadores atualmente já fazem esse controle caso você não dê indicação nenhuma no seu código, então eu não me preocuparia com isso agora - a não ser que você tenha problemas de tráfego ou carga que precise resolver agora. Commented 5/07/2017 às 13:57
  • 3
    Possível duplicata de Guardar ou não cache do navegador? Commented 5/07/2017 às 14:03
  • 3
    Eu quero fazer isso através do ASP.NET e não direto no HTML como na pergunta que você citou. Commented 5/07/2017 às 14:10

1 Resposta 1

4
+50

Arquivos estáticos como CSS, JS e até mesmo imagens podem ser armazenados no disco do cliente em forma de cache. Porém é importante que o servidor web diga que ele deve fazer cache ou não, e por quanto tempo. Muitos servidores web possuem a configuração específica para cada tipo de arquivo.

No caso do IIS express você deve usar o web.conf para fazer tais configurações de modo que o servidor entregue os headers corretamente para o cliente(navegador) fazer o cache de acordo. Esse cache é controlado pelo header Cache-Control.

Exemplo do Cache-Control

Se quiser saber mais acesse https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching ( link em inglês).

Para configurar o cache através do arquivo Web.config local, que é encontrado no diretório de conteúdo você deve configuar a tag <caching>.

Abaixo está uma amostra da configuração necessária para os arquivos js e css por 7 dias, que significa instruir o navegador à armazenar em cache todos os arquivos de js e de css por 7 dias.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
    <caching enabled="true" enableKernelCache="true">
      <profiles>
        <add extension=".css" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="07:00:00"/>
        <add extension=".js" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="07:00:00"/>
      </profiles>
    </caching>
 </system.webServer>
</configuration>

Ainda é possível definir um cache para todos os arquivos estáticos sem distinção:

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
  <system.webServer> 
        <staticContent> 
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> 
        </staticContent> 
  </system.webServer> 
</configuration>

A melhor política para manter os arquivos em cache é a que só modifica o arquivo quando ele é alterado. Isso aumenta o desempenho pois não faz com que o arquivo seja baixado novamente, o servidor irá controlar isso de forma interna. Para isso vamos usar a policy CacheUntilChange

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
    <caching enabled="true" enableKernelCache="true">
      <profiles>
        <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
        <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
      </profiles>
    </caching>
 </system.webServer>
</configuration>

Para saber as variações de cada chave, combinações dos atributos e o que é permitido e outros exemplos acesse a documentação: https://www.iis.net/configreference/system.webserver/caching

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 .