Per attivare la memorizzazione cache sul proprio sito esiste un modo piuttosto semplice che prevede la modifica dell’.htaccess che è un file di configurazione di Apache Web Server letto dal web server per abilitare o disabilitare funzionalità specifiche per il controllo delle risorse o per la gestione degli URL. Questo file è posizionato nella root (cartella principale del sito).
Questo controllo è molto importante e va applicato a tutte quelle risorse che tendenzialmente possono rimanere invariate nel tempo come ad esempio i fogli stile, i JavaScript o le immagini.
Il metodo prevede di “comunicare” al browser che uno specifico tipo di risorsa, identificata in base alla sua estensione, non dovrà essere scaricata nuovamente per un determinato tempo massimo (es. una settimana).
Questo si ottiene attraverso la modifica del file .htaccess e sfruttando il modulo Apace Expires.
Gestione e caratteristiche del browser caching
Esistono più modi di abilitare le date di scadenza ed alcuni aspetti che è importante conoscere al fine di gestire nel modo corretto questa fondamentale funzionalità del web server.
Utilizzare il Cache-Control
L’intestazione Cache-Control fa parte delle specifiche HTTP/1.1 ed è supportato da tutti gli attuali browser moderni: è quindi il metodo più semplice e raccomandato.
Per abilitare questa funzione su tutte le risorse basta utilizzare questa stringa nel file .htaccess:
Header set Cache-Control "max-age=31536000, public"
Se invece l’intenzione è quella di eseguire un controllo per tipologia di file è pobbile specificare l’estensione:
<filesMatch ".(jpg|jpeg|png|gif|svg|css|js|ttf|eot|woff|woff2)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
Vediamo nello specifico il significato:
- la prima riga
filesMatch
serve a specificare quali tipi di file devono essere coinvolti nel processo di caching Header set
genera una header (informazioni prodotte dall’interazione tra il browser e il server) che comunica la scadenza di tutte le richieste HTTP- la durata viene espressa in secondi, dove 31.536.000 corrispondo ad un anno
- la direttiva
public
indica che la richiesta è valida principalmente per il browser di un utente o per una CDN; l’alternativa è la direttivaprivate
che permette di archiviare il contenuto in cache solamente al browser dell’utente
Modulo Expires per impostare la scadenza
Se per qualche motivo il primo metodo non fosse utilizzabile, è possibile creare la stessa configurazione con mod_expires.
Le intestazioni di Expires (Apache Module mod_expires) specificano per quanto tempo il browser può utilizzare la risorsa memorizzata nella cache senza controllare se è disponibile una nuova versione.
Dopo che la risorsa è stata scaricata la prima volta, il browser non invierà alcuna richiesta al server finché non raggiunge la data di scadenza impostata o l’utente svuota la cache. Le linee guida di Google suggeriscono di impostare la scadenza su minimo una settimana e, preferibilmente, massimo un anno nel futuro.
Le istruzioni per utilizzare una data di scadenza seguendo le direttive di Google sono le seguenti e vanno inserite nel file .htaccess:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/font-woff "access 1 year"
ExpiresByType application/font-woff2 "access 1 year"
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType font/opentype "access 1 year"
</IfModule>
## EXPIRES CACHING ##
Nell’esempio sopra sono stati specificati tempi differenti per tipologia di risorsa.
Utilizzo di fingerprint dell’URL
Nel caso ci siano risorse che vengono aggiornate o modificate con regolarità, esistono alcuni accorgimenti che permetteranno di “forzare” lo scaricamento del file aggiornato. A tal fine è possibile assegnare un URL univoco a ogni versione della risorsa sfruttando l’URL fingerprint.
Ad esempio, se il foglio stile del sito si chiama style.css e viene modificato prima della sua data di scadenza, possiamo rilascia una versione del file richiamandolo nell’HTML con un parametro appeso dopo il nome come style.css?v=2.
Utilizzare un parametro appeso alla fine dell’URL come ?v=2
è più pratico in quanto evita di dover modificare ogni volta il nome del file (e di conseguenza il codice che lo richiama in tutte le pagine).
Così facendo il browser riceverà l’istruzione di recuperare nuovamente la risorsa perché la considererà nuova. L’utilizzo di questo metodo consente di impostare date di scadenza non ravvicinate anche per le risorse che vengono modificate con maggiore frequenza e di beneficiare quindi di un tempo di caricamento più veloce.
Quando non è possibile intervenire
La memorizzazione della cache funziona solo ed unicamente per le risorse locali, ovvero per tutti i file che risiedono fisicamente nel proprio web hosting. Questo perché il file .htaccess va a modificare le istruzioni eseguite dalla macchina (hosting) che ospita il sito web.
Per questa motivazione è normale trovarsi davanti ad una situazione simile quando si analizza una pagina con strumenti come PageSpeed Insights.

Gli script esterni integrati nelle pagine come quelli di Google Tag Manager, Google Analytics, AddThis o iubenda avranno una scadenza legata alla configurazione del server da cui vengono distribuiti.
Tipicamente il tempo di cache di questi script è molto basso (da pochi minuti a poche ore) dato che devono assicurarsi che eventuali versioni aggiornate siano scaricate immediatamente da chi visita le pagine.
L’unico modo per raggirare questo aspetto, se mai ci fosse una reale ragione di farlo, consiste nello scaricare le librerie esterne manualmente o con una procedura automatica (ad esempio un cronjob) per poi caricarle sul proprio spazio FTP.
Di conseguenza questi file saranno soggetti alle regole inserite nel file .htaccess e rispetteranno le scadenze personalizzate.
il parametro appeso ?v=2 (esempio: style.css?v=2) si puo lasciare sempre sul codice, in tutte le pagine? Saluti
Certo, l’utilità dell’URL fingerprint è quella di “forzare” l’aggiornamento di una risorsa presente nella cache del browser per tutti gli utenti che hanno già visitato il sito.
Per quelli nuovi il parametro sarà semplicemente ininfluente.
È possibile che mi risulti un errore di caricamento di una pagina web perché ho svuotato la cache? Se sì, come procedere?
Se riscontri un errore è possibile che tu abbia fatto qualche sbaglio nell’implementazione e il sito abbia smesso di funzionare. Controlla bene che il file .htaccess non abbia problemi (eseguendo magari un primo ripristino alla versione precedete).
Può essere che dipenda dal fatto che ho cercato di collegare il cellulare al mio PC?
Ehm no… direi proprio di no 🙂
Ciao come controlli che le risorse siano effettivamente disponibili alla seconda apertura? Ispeziona del browser o Google page speed?
Puoi farlo tramite il report Network disponibile nei vari browser che ti da informazioni sull’eventuale caching delle risorse.