Pubblica asset statici con criteri della cache efficienti

La memorizzazione del codice HTTP nella cache può ridurre il tempo di caricamento della pagina durante le visite ripetute.

Quando un browser richiede una risorsa, il server che la fornisce può indicare al browser per quanto tempo deve memorizzare temporaneamente o memorizzare nella cache la risorsa. Per qualsiasi richiesta successiva della risorsa, il browser utilizza la sua copia locale anziché recuperarla dalla rete.

Come viene eseguito il controllo delle norme relative alla cache di Lighthouse

Lighthouse segnala tutte le risorse statiche che non vengono memorizzate nella cache:

Lighthouse considera una risorsa memorizzabile nella cache se tutte le condizioni seguenti sono soddisfatte:

• La risorsa può essere un carattere, un'immagine, un file multimediale, uno script o un foglio di stile.
• La risorsa ha un codice di stato HTTP 200, 203 o 206.
• La risorsa non ha un criterio no-cache esplicito.

Quando una pagina non supera il controllo, Lighthouse elenca i risultati in una tabella con tre colonne:

URL	La posizione della risorsa cacheabile
TTL cache	La durata attuale della cache della risorsa
Dimensioni trasferimento	Una stima dei dati che gli utenti salverebbero se la risorsa segnalata fosse stata memorizzata nella cache

Nota: consulta il post sui punteggi delle prestazioni di Lighthouse per scoprire come viene calcolato il punteggio delle prestazioni complessivo della tua pagina.

Come memorizzare nella cache le risorse statiche utilizzando la memorizzazione nella cache HTTP

Configura il server in modo che restituisca l'intestazione di risposta HTTP Cache-Control:

Cache-Control: max-age=31536000

L'istruzione max-age indica al browser per quanto tempo deve memorizzare la risorsa nella cache in secondi. Questo esempio imposta la durata su 31536000, che corrisponde a 1 anno: 60 secondi × 60 minuti × 24 ore × 365 giorni = 31536000 secondi.

Devi memorizzare nella cache gli asset statici immutabili per un periodo di tempo lungo, ad esempio un anno o più.

Nota: uno dei rischi delle durate lunghe della cache è che gli utenti non vedranno gli aggiornamenti dei file statici. Puoi evitare questo problema configurando lo strumento di compilazione in modo da incorporare un hash nei nomi file delle risorse statiche in modo che ogni versione sia univoca e chiedendo al browser di recuperare la nuova versione dal server. Per scoprire come incorporare gli hash utilizzando webpack, consulta la guida sulla cache di webpack.

Utilizza no-cache se la risorsa cambia e la freschezza è importante, ma vuoi comunque usufruire di alcuni dei vantaggi in termini di velocità della memorizzazione nella cache. Il browser memorizza comunque nella cache una risorsa impostata su no-cache, ma prima verifica con il server che la risorsa sia ancora aggiornata.

Una durata della cache più lunga non è sempre migliore. In definitiva, spetta a te decidere la durata ottimale della cache per le tue risorse.

Esistono molte direttive per personalizzare il modo in cui il browser memorizza nella cache le diverse risorse. Scopri di più sulle risorse di memorizzazione nella cache in La cache HTTP: guida per la difesa e Configurare il codelab sul comportamento di memorizzazione nella cache HTTP.

Come verificare le risposte memorizzate nella cache in Chrome DevTools

Per vedere quali risorse il browser sta recuperando dalla cache, apri la scheda Rete in Chrome DevTools:

1. Premi Control+Shift+J (o Command+Option+J su Mac) per aprire DevTools.
2. Fai clic sulla scheda Rete.

La colonna Dimensioni in Chrome DevTools può aiutarti a verificare che una risorsa sia stata memorizzata nella cache:

Chrome gestisce le risorse più richieste dalla cache di memoria, che è molto veloce, ma viene cancellata alla chiusura del browser.

Per verificare che l'intestazione Cache-Control di una risorsa sia impostata come previsto, controlla i dati dell'intestazione HTTP:

1. Fai clic sull'URL della richiesta, nella colonna Nome della tabella Richieste.
2. Fai clic sulla scheda Intestazioni.

Ispezione dell'intestazione Cache-Control tramite la scheda Intestazioni.

Indicazioni specifiche per lo stack

Drupal

Imposta la Durata massima cache browser e proxy nella pagina Amministrazione » Configurazione » Sviluppo. Leggi informazioni su cache e ottimizzazione di Drupal per le prestazioni.

Joomla

Vedi Cache.

WordPress

Consulta la sezione Memorizzazione nella cache del browser.

Risorse

• Codice sorgente per il controllo Pubblica le risorse statiche con criteri della cache efficaci
• Specifiche Cache-Control
• MDN (Cache-Control)