Skip to content


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 ##
Su web server Apache e Nginx ci sono due intestazioni HTTP di controllo di cache da impostare: Cache-Control e Expires. Cache-Control è la versione più recente, che ha più opzioni di Expires ed è generalmente più utile se si desidera un controllo più preciso sul comportamento della cache. Se sono impostate queste intestazioni, si può dire al browser dell’utente che il file richiesto può essere mantenuto localmente per un certo periodo di tempo (compreso sempre) senza richiedere nuovamente il file al server. Se le intestazioni non sono impostate, il browser richiederà sempre il file dal server, in attesa sia di status code 200 o 304.

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.

Articoli correlati

Autore

Commenti |2

Lascia un commento Lascia un commento
  1. Gianluca 1 commento

    Ciao grazie per le informazioni. Vorrei chiederti come posso fare per impostare una scadenza ad un file jquery.js
    in pratica PageSpeed mi dice di impostarlo in questo modo ma non capisco come procedere.

    Grazie
    Gianluca

    1. Giovanni Sacheli 754 risposte

      Ciao Gianluca, grazie per il commento.
      Per impostare la cache di specifici file dai un occhio qui: http://stackoverflow.com/questions/27190178/htaccess-caching-specific-files

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’expertise di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1123 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Affidati alla nostra esperienza per fare la differenza.
Richiedi un preventivo

Non perderti altre guide, iscriviti per ricevere un avviso mensile con gli aggiornamenti del blog!

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.