Attivazione Browser Caching (Apache – Nginx – IIS)

Per chiunque sviluppi un sito web o blog, le prestazioni e la velocità di risposta del sito risulta essere un aspetto rilevante, che potrebbe affliggere, negativamente in caso di tempi di risposta elevati (pochi secondi) sull'esperienza dell'utente che vuole usufruire dell'informazione che gli state proponendo ed anche sul posizionamento (SEO) dello stesso sui motori di ricerca. Una delle tecniche più efficaci su come gestire questo importante aspetto di un qualsiasi portale web, il browser caching è sicuramente una delle più efficaci e consigliate da implementare.

In questo articolo mostreremo cos'è il browser caching e come implementarlo su due dei più noti ed utilzzati web server, Apache ed Nginx.

Cominciando dal principio dovremo analizzare come si comporta il nostro sistema, e soprattutto il nostro browser (Chrome, Opera, IE, Edge, Firefox, etc.), richiama una pagina web: molte delle risorse richieste per la corretta visualizzazione del sito vengono inviate dal web server (Apache, Nginx) al nostro client (computer).

Tra i tipici files richiesti possiamo rilevare: files HTML, immagini, video, Javascript (.js), file CSS (.css) (che definiscono lo stile/layout/grafica del portale web), etc.

Gran parte di questi file non varieranno nel tempo (almeno non nel breve termine), specialmente loghi, immagini, Javascript e CSS, mentre il contenuto della pagina molto probabilmente cambiarà, anche spesso, specialmente il testo dello stesso portale.

Il processo di caching lato client (o browser caching) consente ai browser di salvare, in locale sul sistema, gran parte delle risorse utilizzate per il "rendering" della pagina web visitata (generalmente il lato grafico, in quanto è quello che spesso pesa in percentuale maggiore) per tentare di ri-utilizzarle in futuro quando verranno richieste dal browser durante la navigazione del portale web.

La tecnica del browser caching, adottata dalla coppia browser/web server, permette al browser, lato client, di determinare e di confrontare il contenuto della cache locale (quindi delle risorse che sono state salvate precentemente dal browser sul proprio sistema) con quanto viene richiesto durante la navigazione.

Se il web browser rileverà delle risorse locali valide e confrontabili con ciò che è stato richiesto di visualizzare (il portale web), tali risorse verranno richiamate dalla copia locale e non verranno nuovamente scaricate dal portale web, con un indubbio vantaggio (duplice) di risparmio di banda utilizzata dal client (e nel caso di connessioni a consumo questo aspetto risulta rilevante) e di risorse risparmiate (sempre in termini di banda ed anche di utilizzo della memoria) per quanto riguarda il lato server.

Qui di seguito è mostrato un esempio che evidenzia la differenza tra un sito che sfrutta il browser caching locale sul client ed il suo contrario.

Implementare il Browser Caching

L'implementazione del browser caching sul proprio sito web o blog è piuttosto semplice: il tipico suggerimento in tal senso può essere quello di adottare ed attivare plugin specifici per la vostra piattaforma di blogging (Joomla, WordPress, etc.), ma il metodo più efficace e semplice da tenere sotto controllo è la modifica diretta del file .htaccess presente nella stragrande (se non nella totalità) delle root dei siti web (accessibile, se be configurato, solo dai sys admin che gestiscono il portale web).

Quindi, per configurare il browser caching sarà necessario dapprima collegarsi al proprio servizio di web hosting, o al proprio web server localmente, tramite il protocollo FTP ed individuare il file .htaccess nella root del sito. Scaricare localmente il file .htaccess ed aprirlo in modifica in un text editor, come Notepad++. Inserire le seguenti righe all'inizio del file.

## EXPIRES CACHING ##

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 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"
ExpiresDefault "access 2 days"

## EXPIRES CACHING ##

Tale configurazione imposta come data di scadenza un anno per le immagini ed un mese per i documenti (PDF, Flash), a partire dalla data di primo salvataggio in locale ti tali dati. Una volta modificato il file .htaccess bisognerà salvarlo e rinviarlo (sovrascrivendo il vecchio file .htaccess) tramite FTP.

NOTA: modificare il file .htaccess è rischioso, per cui è fortemente consigliato un backup ad ogni modifica dello stesso, per prevenire l'impossibilità di accesso al portale web da parte degli utenti remoti (internet o LAN).

Sui web server di tipo Apache e Nginx sono disponibili due tipi di intestazioni HTTP di controllo per la cache che è possibile impostare: Cache-Control e Expires (come l'esempio di cui sopra).

Cache-Control è la metodologia di caching più recente, che possiede più opzioni della controparte Expires ed è consigliabile adottarle nel caso si desideri un controllo più preciso sul comportamento della cache.

In entrambi i casi, Expires e Cache-Control, tramite queste intestazioni HTTP è possibile istruire il browser dell’utente (client) che il file richiesto può essere mantenuto localmente per un certo lasso di tempo (compreso sempre) senza dover richiedere, ad un eventuale refresh della pagina o all'accesso di un'altra sezione del sito, nuovamente le risorse necessarie al server. Nel caso in cui le intestazioni HTTP non fossero impostate, il client richiederà sempre il file dal web server, in attesa di una risposta e status code 200 o 304.

Le direttive ExpiresDefault ed ExpiresByType (presenti nell'esempio di cui sopra) possono essere definite con le seguenti sintassi:

ExpiresDefault "base[plus num type] [num type] ..."
ExpiresByType type/encoding "base[plus num type] [num type] ..."

la sezione base può essere una delle seguenti:

access
now (equivale ad access)
modification

La stringa plus è opzionale. Il numero (num) deve essere un numero intero (integer).

La stringa type è selezionabile tra le seguenti:

[valore completo] –> [valore abbreviato]
years –> r
months –> mo
weeks –> w
days –> d
hours –> h
minutes –> mi
seconds –> s

Ad esempio, le seguenti direttive possono essere usate per far scadere la cache locale dopo un mese dal primo accesso (si equivalgono tutte e tre, ovviamente):

ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

Il tempo di scadenza può essere definito ulteriormente aggiungendo ulteriori num type come nei seguenti esempi con la direttiva ExpiresByType:

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

E' da tenere presente che se viene utilizzata, come nell'esempio appena esposto, una scadenza basata sulla data di modifica (modification) di una specifica risorsa, il web server non applicherà nessun intestazione Expires per quelle risorse non residenti sul disco del web server, poichè l'informazione di modifica, in quest'ultimo caso non sarà disponibile.

Direttiva ExpiresActive

Questa direttiva presente nel modulo Apache mod_expires può essere inserita nel file .htaccess di un web server basato su Apache. ExpiresActive è la direttiva principale che consente di abilitare o disabilitare l’intestazione Expires e Cache-Control e che quindi mette a disposizione la possibilità di definire la durata della validità della cache dei documenti specificati tramite MIME types. La semplice sintassi adottata da tale direttiva è la seguente:

ExpiresActive On|Off

L’applicazione di questa direttiva dipende dalla posizione fisica del file .htaccess che contiene la regola. Per standard infatti il file .htaccess può essere replicato in più cartelle (e sottocartelle dalla root del sito) con regole specifiche.

• Quando la direttiva è impostata su Off, non viene generata alcuna intestazione per le risorse nella relativa alberatura.
• Quando la direttiva è impostata su On, l’intestazione HTTP viene aggiunta a tutte le risorse in base ai criteri definiti dalle direttive ExpiresByType e ExpiresDefault successivamente.
• Questa direttiva non garantisce che l’intestazione Expires o Cache-Control vengano generate. Se le condizioni non si avverano non viene generata nessuna intestazione, il risultato è come non specificare nessuna direttiva.

Direttiva ExpiresByType

Questa direttiva, inclusa in mod_expires, viene inserita, come le altre della stessa famiglia, nel file .htaccess di un web server Apache. ExpiresByType viene utilizzato per definire il valore dell’intestazione HTTP Expires ed il valore della direttiva max-age dell’intestazione HTTP Cache-Control generata per documenti di uno specifico tipo (ad esempio text/html). La sintassi corretta da inserire per questa direttiva è la seguente:

ExpiresByType MIME-type code seconds

• Il secondo argomento imposta il numero di secondi che verranno aggiunti a un tempo di base per costruire la data di scadenza.
• Il valore Cache-Control: max-age è calcolato sottraendo la data di richiesta del documento dalla data di scadenza ed il risultato è espresso in secondi.
• Il tempo di base è il momento dell’ultima modifica del file oppure il momento dell’ultimo accesso del client a quel file. Questo parametro si compone da due elementi: code+number.

il parametro code può assumere i seguenti valori:

• M indica al server che deve utilizzare come tempo base il momento dell’ultima modifica del file. Quando si utilizza M, tutte le copie cache scadranno allo stesso tempo.
• A significa che il server deve utilizzare come tempo base il momento dell’ultimo accesso di un client al file. Quando si utilizza A, la data di scadenza è diversa per ogni client.

# Enable expirations
ExpiresActive On
# Expire GIF images after six month in the client's cache
ExpiresByType image/gif A15552000
# HTML documents are good for a week from the time they were changed
ExpiresByType text/html M604800

NOTA: tenere presente che ogni direttiva Expires avrà effetto e sarà attiva solo se la direttiva ExpiresActive è impostata su On.

Direttiva ExpiresDefault

Tale direttiva (sempre definita nel modulo mod_expires di Apache) andrà sempre definita nel file .htaccess del web server Apache. ExpiresDefault serve ad impostare l’algoritmo di base (predefinito) per il calcolo della data di scadenza (expiration time) per tutte quelle risorse escluse da una definizione specifica di scadenza (tipo ExpiresByType) che appartengono alla medesima alberatura (in inglese realm). La sintassi corretta da inserire per questa direttiva è la seguente:

ExpiresDefault code seconds

Se si stanno sperimentando problemi riguardanti il browser caching da parte del tuo server Apache, bisogna assicurarsi che il modulo necessario per le intestazioni di scadenza delle risorse di Apache (mod_expires) sia attivo. A riga di comando, su sistemi Linux, è possibile abilitare (e verificare) che il modulo mod_expires col seguente comando:

$ sudo a2enmod expires

Quindi riavviare il servizio di Apache:

$ sudo /etc/init.d/apache2 restart

Browser Caching su Nginx ed Ubuntu

Mentre il web server adotta il file .htaccess per sito per gestire il browser caching, sui web server di tipo Nginx non si adotta il file .htaccess. Per abilitare il Browser Caching bisognerà agire sulla sezione server block del sito su cui abbiamo bisogno che il browser caching sia abilitato. Su un sistema Ubuntu tale configurazione la troveremo in:

/etc/nginx/sites-enabled/tuo-sito

# Default server configuration
# Expires map using nginxsystem variable

map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    expires $expires;

Nell'esempio appena visualizzato, la prima sezione è un map block, che definisce il mapping tra il tipo di file ed il tempo che questo tipo di file deve rimanere memorizzato nella cache locale del browser (client). Ora vediamo le diverse impostazioni utilizzate nell'esempio:

• Il valore di default è impostato su off, il che indica che il web server non aggiungerà intestazioni di scadenda della cache per tutte quelle risorse non specificate esplicitamente. Questo è un comportamento sicuro che può esser utile per quelle tipologie di file/risorse di cui non sappiamo se, una volta poste in cache locale sul client, possono dare problemi o semplicemente perchè sono risorse che non vogliamo semplicemente sottoporre a cache.
• Per la tipologia text/html è stato impostato il valore di epoch. Questo valore speciale indica che non verrà eseguito alcun caching, quindi costringerà il browser a chiedere sempre se il contenuto è aggiornato.
• Per le tipologie di files text/css e application/javascript, ovvero fogli di stile e files Javascript, è stato impostato valore di max, per cui il browser memorizzerà nella cache locale tali files il più a lungo possibile, riducendo la quantità di richieste HTTP successive, e quindi la banda necessaria al loro trasferimento, dato che in genere ad ogni richiesta di pagina sono molti i files di questo tipo richiesti.
• L’ultima impostazione impostata è ~image/, che rappresenta una espressione regolare e rappresenta tutti i tipi di file contenenti image/ nel nome di tipo MIME (come image/jpg e image/png). Come per i fogli di stile, molto spesso sono presenti molte immagini su siti web che possono essere memorizzate nella cache in modo sicuro. Il questo caso il valore è stato impostato su max.

All’interno della sezione server di Nginx, la direttiva Expires (una parte del modulo ngx_http_headers_module) imposta le intestazioni di controllo della cache. Nell'esempio è stata adottato il valore dalla variabile $expires impostata nella map. Quindi le intestazioni HTTP risultanti risulteranno diverse a seconda del tipo di file richiesto dal browser (client).

Una volta eseguita la modifica basterà salvare il suddetto file di configurazione di Nginx e chiudere il file modificato. Per abilitare la nuova configurazione sarà necessario riavviare il servizio del web server Nginx.

Nel caso il primo metodo non dovesse funzionare sulla configurazione in uso, si potrà provare con il blocco location.

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }

    location ~*  \.(pdf)$ {
        expires 30d;
    }
}

Un'altra possibilità, ancora più veloce, è quella di definire una location che, per tutto il sito, utilizzi intestazioni HTTP di Expires a scadenza massima:

location ~* \.(css|js|ico|gif|jpe?g|png|svg|eot|otf|woff|woff2|ttf|ogg)$ {
    expires max; 
}

Al termine della modifica riavviare il servizio Nginx con il seguente comando:

$ service nginx restart

Abilitare Browser Caching su IIS

Per abilitare il browser caching su IIS bisognerà accedere alla console di gestione (MMC) di IIS, quindi posizionarsi sul sito web che si vuole gestire ed aprire la sezione HTTP Response Headers.

Quindi ricapitolando:

• Selezionare il sito web nella sezione Connections.
• Effettuare un doppio click sinistro sull'icona denominata "HTTP Response Headers".
• Nella sezione delle azione, cliccare su "Set Common Headers...".

Una volta aperta la sezione Set Common Headers... abilitare l'opzione Expire Web Content definendo una data assoluta (UTC) od un periodo di tempo (un giorno, un mese, quattro mesi, un anno, etc.).

NOTA: mantenere attiva l'opzione "Enable HTTP Keep-Alive".