How to instruct your browser to cache my Javascript and CSS via web.config

Asked

Viewed 871 times

7

I reviewed my new website on Google Pagespeed Insights, I made some fixes, and now I need to cache some files (CSS and JS) in the browser.

I looked for some articles/questions in Stack Overflow but could not understand how to cache specific files. The result of the analysis is this here. In particular, he says:

Take advantage of browser cache

Setting an expiration date or maximum age in HTTP headers for static resources instructs the browser to load previously downloaded resources from the local disk and not over the network.

I understood that this sets up in web config., but did not understand how to point out only specific files. I would like to web config. and not within the HTML page.

asp.net http cache

  • You could include what Google said about your site in the question ("Setting an expiration date or maximum age in HTTP headers for static resources instructs the browser to load previously downloaded resources from the local disk and not over the network") I would do that, but I always consider it best that the author himself put information of this kind.

  • Renan, that’s basically the point of the question, I can’t find where to set it up.

  • There are several ways to get what you want. I found some in the ONLY.

  • 1

    My suggestion: browsers currently already do this control if you don’t give any indication in your code, so I wouldn’t worry about it now - unless you have traffic or cargo issues that you need to resolve now.

  • Regardless of my suggestion above, +1 because I would like to have a canonical answer here. It is worth reward to those who answer (remind me).

  • 3

    Possible duplicate of Save or not cache browser?

  • 3

    I want to do this through ASP.NET and not directly in HTML as in the question you quoted.

  • Which is your web server and which vesão it?

  • @Leonancarvalho IIS Express, I’m using the . net framework 4.5

Show 4 more comments

1 answer

4


Static files such as CSS, JS, and even images can be cached on the client’s disk. However, it is important that the web server says that it should cache or not, and for how long. Many web servers have the specific configuration for each file type.

In the case of IIS express you must use web.conf to make such settings so that the server delivers the headers correctly to the client(browser) to cache accordingly. This cache is controlled by the Cache-Control header.

Exemplo do Cache-Control

If you want to know more go to https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching ( link in English).

To set up the cache via the local Web.config file, which is found in the content directory you must check the tag <caching>.

Below is a sample of the configuration required for the js and css files for 7 days, which means instructing the browser to cache all js and css files for 7 days.

<?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>

It is still possible to set a cache for all static files without distinction:

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

The best policy for caching files is to only modify the file when it is changed. This increases performance because it does not cause the file to be downloaded again, the server will control it internally. For that we will use the 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>

To know the variations of each key, combinations of attributes and what is allowed and other examples access the documentation: https://www.iis.net/configreference/system.webserver/caching

Browser other questions tagged asp.net http cache

You are not signed in. Login or sign up in order to post.