In questa guida vedremo come configurare correttamente le impostazioni di scadenza degli Header con Apache, ottimizzando le prestazioni del web server nel servire file statici, come immagini, file CSS o JavaScript.
Impostando una data minima di caching dei file risparmierai infatti molta banda sul tuo server. Questo permetterà ai siti web hostati di caricare più velocemente, sfruttando la cache del browser client.
Per prima cosa dovrai connetterti al tuo server tramite una connessione SSH. Se non l’hai ancora fatto, ti consigliamo di seguire la nostra guida per connetterti in sicurezza con il protocollo SSH. In caso di server locale puoi passare al punto successivo e aprire il terminale del tuo server.
Abilitazione dei moduli necessari
Per abilitare l’invio degli Header necessari, devi prima abilitare il modulo di Apache relativo:
E in seguito riavviare il servizio:
$ sudo service apache2 restart
Configurazione del modulo
La configurazione del modulo può essere inserita nelle seguenti posizioni:
-
Nella configurazione di Apache: verrà ereditata da tutti i siti controllati da Apache (host virtuali e non)
-
In un contenitore di host virtuale
-
All’interno della direttiva <Directory> o file .htaccess
In questo esempio andrai a inserirla all’interno della configurazione del sito di default:
$ sudo vim /etc/apache2/sites-available/000-default.conf
Aggiungi quindi la seguente configurazione:
<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
</IfModule>
Attraverso la direttiva FilesMatch stai specificando quali file devono essere conservati dal browser client (in questo caso css, jpg, png, gif e js), mentre attraverso ExpiresDefault stai indicando per quanto tempo devono essere conservati (in questo esempio, una settimana).
Per applicare le modifiche è necessario riavviare Apache:
$ sudo service apache2 restart
Oltre che utilizzare il metodo FilesMatch e ExpiresDefault, puoi anche utilizzare ExpiresByType in modo da impostare l’Header Expires per ogni tipo di file, ad esempio:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 week"
</IfModule>
Sfruttando questo metodo puoi avere un controllo più granulare sulla durata della cache, oltre che impedire il caching di dati Ajax, non inserendo il mime-type application/javascript.
Per entrambe le direttive la sintassi per indicare la durata della cache è la stessa, ovvero:
“[base] plus [valore] [tipo] [valore] [tipo] [valore] [tipo] …”
Il valore base può essere:
Mentre il tipo può assumere i seguenti valori:
-
years: anni
-
months: mesi
-
weeks: settimane
-
days: giorni
-
hours: ore
-
minutes: minuti
-
seconds: secondi
Alcuni esempi di configurazione possono essere:
# Scadenza cache di un anno
ExpiresByType image/jpeg "access plus 1 year"
# Inoltre è possibile aggiungere più unità di misura in sequenza, ad esempio:
# Imposta una scadenza di un mese, 15 giorno e 2 ore
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
# Scadenza cache dalla data di modifica del file più 5 ore e 3 minuti
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
È bene tener presente che, nel momento in cui dovessi cambiare il contenuto di un file sotto cache, quest’ultimo non verrà scaricato dai client fino allo scadere del tempo di caching. Questo potrebbe causare malfunzionamenti sui tuoi siti web.
Sebbene non si possa forzare i client a ignorare la cache precedentemente salvata, si possono adottare diverse tecniche per evitare tale problema.
Una metodologia spesso utilizzata è quella di rinominare il file appena modificato (ad esempio da style.css a style-v2.css) oppure cambiare i link aggiungendo un numero di versione, ad esempio da:
<script src="https://www.dominio.com/js/myScript1.js"></script>
al seguente:
<script src="https://www.dominio.com/js/myScript1.js?v=3.1"></script>