Come impostare la cache del browser (via htaccess) Come risolvere positivamente la notifica di Google sul "Leverage browser caching"

<span class="entry-title-primary">Come impostare la cache del browser (via htaccess)</span> <span class="entry-subtitle">Come risolvere positivamente la notifica di Google sul "Leverage browser caching"</span>

Questo tutorial cercherà di spiegare come si impostano gli header di scadenza (cosiddetti Expires headers) sfruttando apposite direttive nel file .htaccess, sulla base dei suggerimenti per migliorare le prestazioni del sito fornite usualmente dallo strumento Google PageSpeed Insights. Cercheremo quindi di capire cosa sia la cache del browser di una pagina web, come testare le performance del nostro sito e come aggiungere gli expires headers.

Abbiamo discusso queste problematiche, in modo ancora più generale, in due post approfonditi qualche tempo fa (prima e seconda parte), per cui vi suggerisco di leggerli per avere una visione ancora più generale del problema.

Questo genere di operazioni sono concesse esclusivamente su server Apache, con supporto al modulo mod_expires, e sono utili nel caso in cui il tool di Google appena citato fornisca una notifica di un problema tipo “Sfrutta la memorizzazione nella cache del browser“.

Cos’è la cache del browser? E cosa fanno gli expires headers?

A questo punto bisogna dare qualche piccola indicazione su quello che andremo a fare, cercando di non complicare troppo il discorso. Quando visualizziamo una pagina del nostro sito le operazioni effettuate a livello più basso, per così dire, sono numerose: anche se bisognerebbe essere più tecnici, possiamo dire che – in prima istanza – gli header di scadenza servono a specificare la “data di scadenza” del contenuto della pagina, in termini di file HTML, CSS, Javascript e così via.

A cosa ci serve impostare una “data di scadenza”? Farne uso permetterà di ridurre il numero di chiamate HTTP, velocizzando così il processo di caricamento della pagina, cosa particolarmente utile nel caso di picchi di visite. Per avere il sito più veloce, la cache del browser è uno dei metodi più usati (anche se non è certamente l’unico).

Gli Expires headers servono a dire ad Apache che quel file (oppure tutti i file di un certo tipo) non subiranno modifica nel breve periodo, per cui – ad esempio da oggi al prossimo mese – è inutile sovraccaricare di richieste l’hosting: basterà invece fornire un file statico.


Check delle prestazioni del nostro sito

Google Page Speed tool è il tool più utilizzato per chi effettua analisi delle prestazioni di un sito web, che si affianca ad altri concorrenti altrettanto interessanti come PingDom e GTmetrix.com.

Quando Google fornisce un alert sulla Leverage browser caching (Memorizzazione della cache nel browser), significa che ci sta suggerendo di aumentare il “tempo di vita” di una risorsa web, in modo che si possano velocizzare le visite da parte, per intenderci, dei visitatori abituali del sito.

Di norma, inoltre, il tool di Google fornisce un’indicazione esplicita sulle risorse (file JS e/o CSS) che possono – e dovrebbero – essere ottimizzate.


Come impostare la memorizzazione della cache del browser

Quando si lavora sulla cache via htaccess sarà possibile impostare anni, mesi, settimane, giorni, ore, minuti e secondi di scadenza di ogni singolo tipo di file. Tali tempistiche si indicano in inglese (month per mese, year per anno, day per giorno e così via); ad esempio, possiamo decidere di attivare la cache per le immagini del sito: di solito, anche se bisognerebbe valutare caso per caso, si possono impostare tempi di scadenza piuttosto lunghi.

Se impostiamo un anno, ad esempio, significa che la risorsa immagine sarà messa in cache finchè 1) non sarà trascorso un anno 2) il visitatore non avrà svuotato la cache.

Per attivare una cosa del genere, andremo ad inserire qualcosa di questo tipo nel file .htaccess (il . iniziale indica che si tratta di un file nascosto):

ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"

Analogamente, possiamo impostare la durata di un mese per tutti i file di stile (CSS):

ExpiresByType text/css "access plus 1 month”

Per i file javascript, ammesso che il sito non sia in fase di sviluppo o in corso di modifiche, possiamo impostare anche un anno di durata:

ExpiresByType application/javascript "access plus 1 year"

È chiaro che tempi di scadenza troppo lunghi sono in genere poco adatti a qualsiasi sito web attivo e costantemente aggiornato: fate inoltre attenzione che le impostazioni che andate a settare potrebbero non essere adatte al vostro sito oppure, più specificatamente, andare in conflitto con le precedenti impostazioni del vostro sito (ad esempio plugin).

Dal punto di vista tecnico, le direttiva sopra indicate vanno inserite in un blocco del file .htaccess che abiliti il modulo apposito per la cache del browser: in altri termini, dovremo prima introdurre un blocco del tipo

# Abilitiamo le direttive per ExpiresActive On

e poi all’interno inseriremo, una riga alla volta, le direttive necessarie. Prima di farlo, andiamo anzitutto ad abilitare il modulo in modo generale:

# abilita il servizio di cache del browser
ExpiresActive On 
# abilita una durata di default di un mese
ExpiresDefault "access plus 1 month"

In questo caso abbiamo indicato un mese come durata di default, senza specificare il tipo di file, cosa che usualmente si fa ed è indicata per la maggioranza dei siti. Nello specifico, possiamo aggiungere in coda, all’interno del blocco, tutte le direttive che ci servono: quello che si fa di solito è effettuare dei test di performance incrociati per capire quali direttive siano utili a snellire le chiamate HTTP caso per caso. La soluzione del problema, nonostante venga presentata in maniera semplicistica in moltissime guide analoghe, è di soluzione tutt’altro che scontata perchè dipende dal theme utilizzato, senza contare che molte chiamate (specie in presenza di plugin di WP che introducono file JS o CSS) non possono essere ottimizzate con questo metodo.

Di seguito c’è un esempio di mod_expires con le direttive appena viste.

# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month”
# Javascript
ExpiresByType application/javascript "access plus 1 year"

A livello tecnico più avanzato, è possibile visualizzare informazioni sulla cache del browser di un sito mediante un curl (su Mac e Linux):

curl -I nomesito.prova

che restituirà qualcosa del genere (se la cache non è attiva o l’informazione non è disponibile via CURL):

HTTP/1.1 200 OK
Date: Mon, 04 May 2015 08:06:08 GMT
Server: Apache
Vary: Cookie,Accept-Encoding
X-UA-Compatible: IE=edge,chrome=1
X-Powered-By: PleskLin
Content-Type: text/html; charset=UTF-8

e qualcosa del genere se invece lo fosse:

HTTP/1.1 200 OK
Date: Thu, 04 May 2015 10:14:35 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=741dreb25456514f:FF=0:TM=13154488957:LM=15526957:S=kmFi3jKGDujg; expires=Sat, 06-Jul-2013 22:15:57 GMT; path=/; domain=[...]
Set-Cookie: NID=48=8jFij8f8Lej115z89237iaa8sdoA8akjaj8DybmLHXMC6aNGyxM8DnyNv-
iYjF09QhiCq2MdM3PKJDSFlkJalkaPHAU4JQy7M76MKDQKEFLPqzoTSBPLKJLKMmdILlkdjel; expires=Fri, 06-Jan-2012 22:15:57 GMT; path=/; domain=[...]; HttpOnly
Server: gws
X-XSS-Protection: 1; mode=block
Transfer-Encoding: chunked

Si tenga conto, comunque, che per ragioni di configurazione o di sicurezza curl potrebbe non fornire tutte le informazioni, che potrebbero a questo livello essere incomplete o parziali.

Scopri tutto quello che c’è da sapere sul file .htaccess partendo da qui.

Photo by anarchosyn

Ti piace questo articolo?

11 voti

Su Trovalost.it puntiamo sulla qualità dei contenuti da quando siamo nati: la tua sincera valutazione può aiutarci a migliorare ogni giorno.

Come impostare la cache del browser (via htaccess)

Votato 8.73 / 10, da 11 utenti