How to instruct the browser to keep my Javascript and CSS cached through web.config

Question

How to instruct the browser to keep my Javascript and CSS cached through web.config

Navigation

#1 by (4 votes)

7

I analyzed my new site in Google PageSpeed Insights , I made some corrections, and now I need to cache some files (CSS and JS) in the browser.

I searched for some articles / questions in Stack Overflow but could not figure out how to cache specific files. The result of the review is this here . In particular, it says:

Enhance Browser Caching

Setting an expiration date or a maximum age in HTTP headers for static features instructs the browser to load previously downloaded resources from the local disk rather than through the network.

I understand that this is set up in web.config , but I did not understand how to point to specific files only. I would like web.config and not inside the HTML page.

http asp.net cache

asked by anonymous 05.07.2017 / 15:41

1 answer

How to define the order in which the components will receive focus through the TAB? abntex2 compile error

score 4 · Accepted Answer

Static files such as CSS, JS and even images can be stored on the client disk in the form of a cache. But it is important that the web server tells you to cache it, and for how long. Many web servers have the specific configuration for each file type.

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

Ifyou'dliketolearnmore,visit link (link in English.

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

Below is a sample of the configuration needed 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 to keep files in cache is one that only modifies 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 this we will use 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 find variations of each key, combinations of attributes and what is allowed, and other examples, visit the documentation: link