UX & Coding

Sfruttare la Cache per pagine più veloci

"La memorizzazione delle risorse statiche nella cache del browser permette di ridurre il tempo di caricamento delle pagine"

Questo metodo è molto importante e va applicato a tutte quelle risorse che tendenzialmente possono rimanere invariate nel tempo come ad esempio i fogli stile, i JavaScript o le immagini.

Per attivare la memorizzazione cache sul proprio server esiste un modo piuttosto semplice che prevede la modifica dell’.htaccess che è un file di configurazione di Apache Web Server letto dal web server per abilitare o disabilitare funzionalità specifiche per il controllo delle risorse o per la gestione delle url. Questo file è posizionato nella root (cartella principale del sito).

Il metodo prevede di “comunicare” al browser che un determinato tipo di risorsa, identificata in base alla sua estensione, non dovrà essere scaricata nuovamente per un determinato tempo massimo (es. una settimana).

Questo si ottiene attraverso la modifica del file .htaccess e sfruttando il modulo Apace Expires.

Metodo Cache-Control

L’intestazione Cache-Control fa parte delle specifiche HTTP/1.1 ed è supportato da tutti gli attuali browser moderni: è quindi il metodo più semplice e raccomandato.

Per abilitare questa funzione su tutte le risorse basta utilizzare questa stringa nel file .htaccess:

Header set Cache-Control "max-age=31536000, public"

Se invece l’intenzione è quella di eseguire un controllo per tipologia di file è pobbile specificare l’estensione:

<filesMatch ".(jpg|jpeg|png|gif|svg|css|js|ttf|eot|woff|woff2)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

Vediamo nello specifico il significato:

  • la prima riga filesMatch serve a specificare quali tipi di file devono essere coinvolti nel processo di caching
  • Header set genera una header (informazioni prodotte dall’interazione tra il browser e il server) che comunica la scadenza di tutte le richieste HTTP
  • la durata viene espressa in secondi, dove 31.536.000 corrispondo ad un anno
  • la direttiva public indica che la richiesta è valida principalmente per il browser di un utente o per una CDN; l’alternativa è la direttiva private che permette di archiviare il contenuto in cache solamente al browser dell’utente

Modulo Expires: impostare la data di scadenza

Se per qualche motivo il primo metodo non fosse utilizzabile, è possibile creare la stessa configurazione con mod_expires.

Le intestazioni di Expires (Apache Module mod_expires) specificano per quanto tempo il browser può utilizzare la risorsa memorizzata nella cache senza controllare se è disponibile una nuova versione.

Dopo che la risorsa è stata scaricata la prima volta, il browser non invierà alcuna richiesta al server finché non raggiunge la data di scadenza impostata o l’utente svuota la cache. Le linee guida di Google suggeriscono di impostare la scadenza su minimo una settimana e, preferibilmente, massimo un anno nel futuro.

Le istruzioni per utilizzare una data di scadenza seguendo le direttive di Google sono le seguenti e vanno inserite nel file .htaccess:

## 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 image/svg+xml "access 1 month"
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"
ExpiresByType application/font-woff "access 1 year"
ExpiresByType application/font-woff2 "access 1 year"
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType font/opentype "access 1 year"
</IfModule>
## EXPIRES CACHING ##

Nell’esempio sopra sono stati specificati tempi differenti per tipologia di risorsa.

Utilizzo di fingerprint dell’URL

Nel caso ci siano risorse che vengono aggiornate o modificate con regolarità, esistono alcuni accorgimenti che permetteranno di “forzare” lo scaricamento del file aggiornato. A tal fine è possibile assegnare un URL univoco a ogni versione della risorsa sfruttando l’url fingerprint.

Ad esempio, se il foglio stile del sito si chiama style.css e viene modificato prima della sua data di scadenza, possiamo rilascia una versione del file richiamandolo nell’HTML con un parametro appeso dopo il nome come style.css?v=2.

Utilizzare un parametro appeso alla fine della url come ?v=2 è più pratico in quanto evita di dover modificare ogni volta il nome del file (e di conseguenza il codice che lo richiama in tutte le pagine).

Così facendo il browser riceverà l’istruzione di recuperare nuovamente la risorsa perché la considererà nuova. L’utilizzo di questo metodo consente di impostare date di scadenza non ravvicinate anche per le risorse che vengono modificate con maggiore frequenza e di beneficiare quindi di un tempo di caricamento più veloce.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.