Pubblica asset statici con criteri della cache efficienti

La memorizzazione nella cache HTTP può accelerare il tempo di caricamento della pagina in caso di visite ripetute.

Quando un browser richiede una risorsa, il server che la fornisce può indicare al browser per quanto tempo deve archiviare temporaneamente o memorizzare nella cache la risorsa. Per qualsiasi richiesta successiva relativa alla risorsa, il browser utilizza la propria copia locale invece di recuperarla dalla rete.

Come non va a buon fine il controllo del criterio della cache di Lighthouse

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

Uno screenshot di Lighthouse "Pubblica risorse statiche" con un controllo efficiente dei criteri della cache

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

  • La risorsa è un carattere, un'immagine, un file multimediale, uno script o un foglio di stile.
  • La risorsa presenta un codice di stato HTTP 200, 203 o 206.
  • La risorsa non ha un criterio esplicito di assenza di cache.

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

URL La località della risorsa memorizzabile nella cache
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

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

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

Cache-Control: max-age=31536000

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

Devi memorizzare nella cache le risorse statiche immutabili per un lungo periodo di tempo, ad esempio per un anno o più.

Utilizza no-cache se le modifiche e l'aggiornamento delle risorse sono importanti, ma vuoi comunque usufruire dei vantaggi in termini di velocità della memorizzazione nella cache. Il browser memorizza ancora nella cache una risorsa impostata su no-cache, ma verifica prima con il server che la risorsa sia ancora aggiornata.

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

Esistono molte istruzioni per personalizzare il modo in cui il browser memorizza le diverse risorse nella cache. Per ulteriori informazioni sulle risorse di memorizzazione nella cache, consulta gli articoli The HTTP cache: your first line of defense guide (Guida alla cache HTTP: la tua prima riga di difesa) e Configurazione del codelab sul comportamento di memorizzazione nella cache HTTP.

Come verificare le risposte memorizzate nella cache in Chrome DevTools

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

[commento]: <> (il seguente elenco era uno Short di web.dev, ma non è stato tradotto dall'inglese per nessuna lingua.) 1. Premi Control+Shift+J (o Command+Option+J su Mac) per aprire DevTools. 2. Fai clic sulla scheda Rete.

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

La colonna Dimensioni.

Chrome fornisce 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&#39;intestazione Cache-Control tramite la scheda Intestazioni
Ispezione dell'intestazione Cache-Control tramite la scheda Intestazioni.

Indicazioni specifiche per lo stack

Drupal

Imposta l'età massima della cache del browser e del proxy nella pagina Amministrazione > Configurazione > Sviluppo. Consulta le risorse per le prestazioni di Drupal.

Joomla

Vedi Cache.

WordPress

Vedi Memorizzazione nella cache del browser.

Risorse