Una delle manovre più interessanti che si possono fare per migliorare l’esperienza utente sul proprio sito, è quella di utilizzare gli expires headers.
Cosa sono gli Expires Headers?
Nel dettaglio si tratta di una mod HTTP (ufficiale) che permette di istruire il browser dell’utente a mantenere in cache determinati file. Ad esempio quelli grafici (jpg, gif e png) come i file CSS e Js (Javascript). Infatti quando visitiamo un sito web, il nostro browser richiede di scaricare tutti questi file, compresi gli html e php compilati al fine di interpretare correttamente la pagina. E’ utile per chiunque conoscere il fatto della interpretazione, poiché oltre a spiegare le varie differenze tra browser, permette di comprendere il perché i siti moderni sono così energivori in termini di RAM. Con le direttive di expires headers potremo indicare al browser degli utenti cosa fare dei file scaricati dopo l’uso. In genere i browser tengono una cache, ma la durata e il tipo di mantenimento dei file può variare in modo significativo. Va subito chiarito che in caso di svuotamento della cache, o anche di qualche aggiornamento del browser stesso, questi file verranno cancellati. La nostra direttiva di expires headers è pur sempre indicativa e non impositiva.
Vantaggi.
I vantaggi sono tangibili. Spesso vedo molta gente che si butta con plugin di Caching pensando che sia la panacea a tutti i mali. Questi plugin hanno un senso nel momento in cui il nostro sito cresce in modo significativo in termini di visitatori e si vuole ridurre sensibilmente il carico verso il database MySQL. Il plugin di cache realizzerà delle copie in HTML della controparte php e la fornirà agli utenti senza avere una iterazione con il database per risolvere le centinaia di query che possono normalmente avvenire in una pagina dinamica. Tuttavia il contenuto della pagina, css, javascript e file di immagine rimangono comunque da scaricare. Con expires headers faremo in modo di scaricarle una volta, la successiva l’utente avrà una netta percezione di miglioramento sui tempi di caricamento poiché css, js e jpg/png/gif sono già stati scaricati in precedenza. Questo si traduce in minor carico per il server che non dovrà fornire ogni volta i file richiesti, minor banda utilizzata, e come già citato una miglior esperienza utente.
Cosa è necessario. Come mettere in pratica.
L’esempio che porto qui è relativo al webserver Apache 2.2 o superiori, su ambiente Linux Server dove è necessario l’accesso via console. Apache deve avere abilitata la mod_expires. Per conoscere l’elenco delle mod abilitate è sufficiente effettuare una lista della cartella /etc/apache/mods-enabled
ll /etc/apache2/mods-enabled/
...
expires.load -> ../mods-available/expires.load
...
Se non vedete la mod caricata nell’elenco lo potete fare attraverso il comando
sudo a2enmod expires
sudo service apache2 restart
Nel caso di hosting condiviso potrete verificare se avete abilitata la mod attraverso php con l’istruzione phpinfo();
Se non la vedete dovete chiedere assistenza al vostro hosting provider. Come spiegato nella prima parte dell’articolo dovrebbe essere ben disposto visto che ha solo da guadagnarci con minor utilizzo di carico cpu e banda utilizzata.
A questo punto dopo aver caricato la mod expires sul nostro webserver, dobbiamo dare le indicazioni desiderate. Queste avvengono attraverso il file .htaccess che andrà messo nella root del sito, o comunque nella cartella dove intendiamo attuare l’Expires Headers.
Nel file .htaccess si andrà ad indicare cosa deve essere mantenuto in cache e per quanto tempo. Come abbiamo spiegato è utile indicare tutti i file grafici, quindi file con estensione png, jpg e gif, ma anche quello relativo all’icona, seppur insignificante in termini di peso. Allo stesso modo si possono indicare i file relativi ai fogli di stile ( .css) e quelli relativi a javascript ( .js).
Di seguito un esempio:
# Abilitiamo expires, in caso di problemi basta mettere Off
ExpiresActive On
# Comportamento base della direttiva, mantieni per un mese i file
ExpiresDefault "access plus 1 month"
# Direttiva favicon
ExpiresByType image/x-icon "access plus 1 year"
# Direttiva file grafici
ExpiresByType image/gif "access plus 6 month"
ExpiresByType image/png "access plus 6 month"
ExpiresByType image/jpg "access plus 6 month"
ExpiresByType image/jpeg "access plus 6 month"
# Direttiva per i CSS
ExpiresByType text/css "access plus 6 month"
# Direttiva per Javascript
ExpiresByType application/javascript "access plus 1 year"
Come si può vedere abbiamo realizzato un piccolo sistema dove i file grafici come i css saranno mantenuti per 6 mesi, quelli relativi alla favicon e ai file javascript per un anno. Tutto il resto avrà validità di un mese. Vi sconsiglio di eccedere l’anno poiché incorrereste in una penalizzazione dei motori di ricerca.
Per chi utilizza WordPress potete mettere questa direttiva prima di quella creata dal CMS. Nel caso rivediate le impostazioni di URL Rewrite dovrete ricontrollare il file poiché potrebbe cancellarne il contenuto.
Provarlo e testarlo non costa nulla, la mod per Apache è presente nelle installazioni base di Apache e abilitarlo ed attivare un .htaccess porta via qualche minuto.