Abilitare la cache del browser delle risorse statiche

Per abbattere i tempi di attesa e caricamento delle pagine del sito occorre configurare correttamente gli header HTTP delle varie risorse servite al browser di navigazione in modo da consentirne il caching lato client sul browser.

Configurando opportunamente il vostro web server potrete fare in modo di far scaricare dal browser immagini, video, script e css solo la prima volta che verranno richiesti e mantenendoli nella cache del browser per tutte le richieste successive.

Soluzione con file .htaccess (Linux)

Per poter abilitare la cache HTTP delle risorse statiche dovete semplicemente verificare che il vostro sito o blog utilizzi Apache con i moduli mod_headers e mod_expires attivi, dopodiché non dovete far altro che aggiungere al vostro file .htaccess (solitamente posizionato nella root del sito) una configurazione analoga alla seguente:

  # Abilita l'Expires ed imposta il default to 0
  ExpiresActive On
  ExpiresDefault "access plus 0 seconds"

  # Imposta la cache dei file multimediali ad 1 anno
  ExpiresDefault "access plus 1 year"
  Header append Cache-Control "public"
 
  # Imposta la cache delle immagini a 1 settimana
  ExpiresDefault "access plus 1 week"
  Header append Cache-Control "public"
 
  # Imposta la cache delle risorse aggiornate di frequente a 1 mese
  ExpiresDefault "access plus 1 month"
  Header append Cache-Control "proxy-revalidate"
 
  # Forza la disabilitazione della cache per le risorse dinamiche
  ExpiresActive Off
  Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
  Header set Pragma "no-cache"
 
Riferimenti:

- http://httpd.apache.org/docs/current/mod/mod_expires.html
- https://gtmetrix.com/add-expires-headers.html

Soluzione con  web.config (Windows)

E' possibile ottenere il risultato inserendo nella cartella contenente i file di cui forzare il caricamento in cache un file web.config con il seguente contenuto:

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

Così forziamo il cache dei file contenuti nella cartella (images, css o js che siano) per un giorno.
Volendo forzare la cache per 30 giorni occorre impostare il parametro cacheControlMaxAge al valore "30.00:00:00"

Per forzare il caching di una sola risorsa occorre inserire il web.config nella cartella contenente la risorsa ed utilizzare l'elemento location nel seguente modo:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <location path="path/to/the/file">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="10.00:00:00" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

Per disabilitare la cache invece degli elementi della cartella utilizzare il seguente web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Cache-Control" value="no-cache" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Riferimenti:
- http://blog.janjonas.net/2011-08-21/microsoft-iis-7-enable-client-side-browser-caching-static-content-web-config