Abilitare il Browser Caching su Apache e Nginx

Per ottimizzare le prestazioni del web server PageSpeed, GTmetrix e YSlow consigliano sempre di abilitare il Browser Caching.

Che cos’è il Browser Caching

Il caching è una funzionalità dei browser che permette di memorizzare nel computer locale i file di risorse della pagina Web quando un utente la visita.

“Sfruttare” il caching del browser avviene quando un webmaster utilizza le direttive specifiche nell’HTTP header per comunicare ai browser come devono essere gestite le loro risorse. Quando un browser web visualizza la tua pagina web, deve caricare diversi elementi come il tuo logo, il tuo file CSS e altre risorse. Se il server è configurato per il browser caching, comunicherà ai browser quali tipologie di file i browser possono tenere in memoria per evitare di scaricarli di nuovo alle visualizzazioni successive.

Leverage Browser Caching

Impostare una data di scadenza nell’HTTP header per risorse statiche forza il browser a caricare le risorse precedentemente scaricate dal disco locale e non dalla rete. Il Browser Caching è attivabile in diversi modi su WordPress: accedendo alle impostazioni del web server, via plugin oppure attraverso il file .HTACCESS. Modificare il file .HTACCESS risulta più semplice e veloce quando non si può accedere alle impostazioni del web server.

Modificare il file .HTACCESS

Per impostare gli HTTP header su Apache devi creare/modificare il file .HTACCESS inserendo questi comandi:

## 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 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"
</IfModule>
## EXPIRES CACHING ##

Le direttive ExpiresDefault ed ExpiresByType possono essere definite con queste sintassi:
ExpiresDefault "base[plus num type] [num type] ..."
ExpiresByType type/encoding "base[plus num type] [num type] ..."

Base può essere:

• access
• now (equivale ad ‘access’)
• modification

il testo plus è opzionale. Il numero deve essere un numero intero.

Il type è selezionabile tra:

• [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 copia cache dopo un mese dal primo accesso::
ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

Il tempo di scadenza può essere definito aggiungendo i “num type”:
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
Considera che se utilizzi un’impostazione basata sulla data di modifica di una data risorsa, il web server non appenderà nessun “Expires header” per elementi non ospitati sul disco del web server (dato che non è presente nessuna data di modifica per quel genere di contenuto).

Direttiva ExpiresActive

Questa direttiva di mod_expires si inserisce nel file .htaccess di un web server Apache. ExpiresActive serve ad abilitare o disabilitare l’intestazione “Expires” e “Cache-Control” che definisce la durata della cache dei documenti specificati. La sintassi corretta per inserire questa direttiva è:
ExpiresActive On|Off

L’applicazione di questa direttiva dipenda dalla locazione fisica del file .htaccess che contiene la regola. Per standard infatti il file .htaccess può essere replicato in più cartelle con regole specifiche.

• Quando la direttiva è impostata su Off, non viene generata nessuna intestazione per i documenti nella relativa alberatura
• Quando la direttiva è impostata su On, l’intestazione HTTP viene aggiunta a tutti i documenti serviti in base ai criteri definiti dalle direttive ExpiresByType e ExpiresDefault

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 di mod_expires si inserisce nel file .htaccess di un web server Apache. ExpiresByType serve a 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 per inserire questa direttiva è:
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.

Code può essere:

• M significa che il server 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.

Esempio:

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

Ricordati che questa direttiva ha effetto soltanto se hai specificato ExpiresActive On

Direttiva ExpiresDefault

Questa direttiva di mod_expires si inserisce nel file .htaccess di un web server Apache. ExpiresDefault serve ad impostare l’algoritmo di base per il calcolo della data di scadenza (expiration time) per tutti i documenti nell’alberatura (in inglese realm). La sintassi corretta per inserire questa direttiva è:
ExpiresDefault code seconds

Abilitare il Browser Caching su NGINX e Ubuntu

NGINX non usa il file .HTACCESS, per abilitare il Browser Caching è necessario modificare il server block del sito che ti interessa. Su Ubuntu lo trovi di solito in:
/etc/nginx/sites-enabled/tuo-sito

Metodo 1

. . .
# Default server configuration
#

# Expires map
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;
. . .

La sezione prima del blocco del server è un nuovo map block che definisce il mapping tra il tipo di file ed il tempo che questo tipo di file deve restare memorizzato nella cache.

Nell’esempio mostrato sto utilizzando diverse impostazioni:

• Il valore di default è impostato su off, che non aggiungerà intestazioni di controllo della cache. E’ un comportamento sicuro per tipologie di file che non conosco e per contenuti di cui non ho esigenze particolari di cache
• Per il text/html, ho impostato il valore di epoch. Questo è un valore speciale che si traduce esplicitamente in nessun caching, che costringe il browser a chiedere sempre se il contenuto è aggiornato
• Per il text/css e application/javascript, che sono fogli di stile e file Javascript, ho il valore di max. Ciò significa che il browser memorizza nella cache i file più a lungo possibile, riducendo la quantità di richieste HTTP successive, e di fatto la banda dato che vi sono in genere molti di questi file
• L’ultima impostazione è per ~image/, che è una espressione regolare che corrisponde a tutti i tipi di file contenenti image/ nel nome di tipo MIME (come image/jpg e image/png). Come i fogli di stile, spesso ci sono molte immagini su siti web che possono essere memorizzate nella cache in modo sicuro. Il valore l’ho impostato su max

All’interno del blocco del server di NGINX, la direttiva Expires (una parte del modulo header) imposta le intestazioni di controllo della cache. Si utilizza il valore dalla variabile $expires impostata nella map. In questo modo, le intestazioni risultanti saranno diverse a seconda del tipo di file.

Salva e chiudi il file modificato per uscire. Per abilitare la nuova configurazione, riavvia Nginx.

Metodo 2

Nel caso il primo metodo non dovesse funzionare sulla tua macchina, prova con la direttiva 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;
    }
}

Questo articolo ti è servito? Potresti condividerlo con amici e colleghi e lasciare un commento.