Come funziona la cache del browser?

La cache del browser è un meccanismo utilizzato dai browser per archiviare localmente le risorse della pagina Web. Ciò aggiunge miglioramenti delle prestazioni, riduce al minimo il consumo di larghezza di banda e nel complesso crea un'esperienza più rapida. In questo articolo spieghiamo come funziona la memorizzazione nella cache del browser e come implementarla sul tuo sito web.

Cos'è la cache del browser?

La cache è un componente software o hardware utilizzato per memorizzare temporaneamente i valori per un accesso futuro più rapido. La cache del browser è un piccolo database di file che contiene le risorse della pagina Web scaricate, come immagini, video, CSS, Javascript e così via. L'idea di base alla base è la seguente:

Il browser richiede alcuni contenuti dal server web. Se il contenuto non è nella cache del browser, viene recuperato direttamente dal server web. Se il contenuto è stato precedentemente memorizzato nella cache, il browser ignora il server e carica il contenuto direttamente dalla sua cache.

Il contenuto è considerato obsoleto a seconda che il contenuto memorizzato nella cache sia scaduto o meno. Fresh, invece, significa che il contenuto non ha superato la data di scadenza e può essere servito direttamente dalla cache del browser senza coinvolgere il server.

Il termine convalida si riferisce al contenuto che deve essere verificato rispetto alla versione più recente posseduta dal server. In breve, per determinare se il contenuto è obsoleto o meno. L'invalidazione si verifica quando il contenuto è stato rimosso dalla cache prima che trascorra la data di scadenza. Questo può essere forzato dal server, nei casi in cui il contenuto è cambiato, e il browser deve avere la versione più recente per non introdurre problemi.

La memorizzazione nella cache del browser può essere sfruttata da sviluppatori Web e amministratori tramite l'uso di intestazioni HTTP specifiche. Queste intestazioni indicano al browser Web quando memorizzare nella cache una risorsa, quando non farlo e per quanto tempo. L'uso di intestazioni relative alla cache HTTP può essere spesso frustrante poiché c'è una certa sovrapposizione con le intestazioni nelle varie reincarnazioni del protocollo HTTP. Aggiungi al mix cose come lo strano proxy web in mezzo, vecchi browser, politiche di memorizzazione nella cache in conflitto e implementazioni (ad esempio diversi plugin di WordPress) e può diventare rapidamente un mal di testa.

Intestazioni della cache del browser

L'insieme di regole che definiscono cosa può essere memorizzato nella cache o meno e per quanto tempo è chiamato politica di memorizzazione nella cache. Ciò è implementato dal proprietario del sito Web attraverso l'uso di intestazioni di risposta di memorizzazione nella cache. Sebbene ciò possa essere ottenuto in molti modi diversi , probabilmente dovresti occuparti solo del controllo della cache, all'inizio.

Controllo della cache

L'intestazione Cache-control è stata introdotta in HTTP/1.1 ed è considerata l'implementazione più moderna che ci sia. Ci sono diversi valori che puoi usare, a seconda di come vuoi che si comportino i browser. Rendendolo abbastanza versatile. Di seguito è riportato un elenco di direttive Cache-Control:

• Nessuna cache
  Indica al browser Web di non fare riferimento immediatamente alla cache, ma di convalidare il contenuto rispetto al server. Se è fresco, può essere servito dalla cache.
• Nessun negozio
  Dice al browser di non memorizzare nella cache il contenuto in alcun modo. Viene utilizzato principalmente quando si tratta di dati sensibili o con dati che cambiano frequentemente.
• Pubblico
  Contrassegna il contenuto come pubblico, il che significa che può essere memorizzato nella cache dal browser e da eventuali intermediari (come proxy, ecc.).
• Privato
  Utilizzato per contrassegnare il contenuto come privato, il che significa che può essere memorizzato nella cache solo dal browser e non da proxy intermediari e simili. Questo di solito si riferisce a dati relativi all'utente.
• Età massima
  Max-age rappresenta il tempo massimo in secondi in cui un contenuto può rimanere nella cache del browser prima che il client debba riconvalidarlo. Contrariamente all'intestazione Expires che visiteremo a breve, max-age definisce un valore relativo in secondi dal momento in cui il contenuto è stato memorizzato nella cache e non una data di scadenza assoluta.
• S-max
  Questo è simile a max-age ma viene utilizzato solo per le cache intermedie.
• Deve essere riconvalidato
  Forza il browser a riconvalidare il contenuto ogni volta che ne ha bisogno, invece di servirlo direttamente dalla cache del browser.
  Questo è utile in caso di interruzione della rete.
• Riconvalida del proxy
  Simile a must-revalidate, ma si applica solo alle cache intermedie.
• nessuna trasformazione
  Indica al browser di non trasformare in alcun modo il contenuto ricevuto dal server (solitamente compressione, ecc.).

Etag

L'intestazione della risposta Etag viene utilizzata per identificare una risorsa specifica. Ogni volta che una determinata risorsa cambia, viene generato un nuovo Etag. In questo modo viene risparmiata la larghezza di banda, perché il server web non ha bisogno di dare una risposta completa se l'Etag non è cambiato. Di conseguenza, l'intestazione Etag è abilitata per impostazione predefinita su Nginx e Apache e i valori Etag vengono generati automaticamente, quindi non è necessario specificare nulla.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

Scade

Questo è stato introdotto in HTTP/1.0 e definisce una data specifica in futuro in cui il contenuto sarà considerato obsoleto. È effettivamente una data "da consumarsi preferibilmente entro" per i contenuti. Ad esempio, Scade: Thu, 25 May 2017 12:30:00 GMT

Pragma

Questa è un'intestazione HTTP/1.0 alquanto obsoleta che viene utilizzata principalmente per la compatibilità con le versioni precedenti. L'inserimento di Pragma: no-cache farà sì che il tuo browser si comporti in modo simile a Cache-Control: no-cache .

Come implementare una politica di memorizzazione nella cache sul tuo sito web

Esistono due modi per implementare una politica di memorizzazione nella cache sul tuo sito web. Il primo è definire le intestazioni di risposta della cache nella configurazione del server web. Il secondo è farlo direttamente all'interno di PHP. Di seguito sono riportati esempi dei due server Web più popolari, Apache2 e Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

Come puoi vedere è piuttosto semplice. Nel primo esempio, utilizziamo la direttiva FileMatch di apache2 per confrontare un insieme specifico di tipi di file (.ico, .pdf, ecc.) e renderli pubblici, con un'età massima di 84600 secondi. Nel secondo, confrontiamo nuovamente alcuni tipi di file utilizzando la direttiva location di nginx e includiamo un'età massima di 365 giorni. Li definiamo anche come "pubblici" usando la clausola add header.

PHP

Se desideri aggiungere intestazioni di risposta direttamente al tuo codice, usa semplicemente il comando header di PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Come testare per vedere se funziona

Puoi facilmente verificare per vedere le regole di memorizzazione nella cache del browser, utilizzando, ad esempio, la console Web di Firefox o gli Strumenti per sviluppatori di Chrome:

1. Clicca sull'icona dell'hamburger in alto a destra.
2. Seleziona Altri strumenti > Strumenti per sviluppatori
3. Inserisci il tuo URL nella barra degli indirizzi e premi Invio.

Dovresti vedere un elenco di richieste durante il caricamento del tuo URL. Seleziona una risorsa facendo clic su di essa. Ispeziona le intestazioni della risposta a destra e in particolare il codice di stato. Stampa il codice HTTP 200 ma indica tra parentesi che proviene dalla cache di memoria.

Ciò significa che la risorsa è stata caricata automaticamente dall'archivio cache locale, invece di richiederla al server.

Nei casi in cui hai una clausola "must-revalidate" sull'intestazione Cache-Control, il codice di stato sarà 304 (non modificato). Ciò significa che il tuo browser ha riconvalidato la risorsa rispetto al server e il server ha risposto che il contenuto non è cambiato, quindi può essere servito dalla cache del browser.

Procedi a disabilitare la cache selezionando la casella di controllo Disabilita cache e premendo Ricarica.

In questo caso, vedi che il codice di stato è 200 senza alcuna indicazione che abbia utilizzato la cache. Il browser ha richiesto la risorsa dal server Web e il server Web ha risposto fornendo una nuova copia.

Conclusione

Le politiche di memorizzazione nella cache e memorizzazione nella cache del browser possono diventare piuttosto complicate. Ma iniziare a sperimentare con Cache-Control come abbiamo dimostrato è semplice. La maggior parte delle volte l'implementazione di una politica di memorizzazione nella cache "generica" ​​per le risorse statiche è sufficiente per fare la differenza per le prestazioni del tuo sito web. Tuttavia, aggiunge un ulteriore livello di "preoccupazione" oltre a tante altre cose, e crediamo che non dovrebbe essere così. Seguici nel nostro prossimo post, dove mostreremo come implementiamo la memorizzazione nella cache del browser in Pressidium che fa sparire tutte le preoccupazioni.