La memorizzazione nella cache HTTP può accelerare il tempo di caricamento della pagina durante le visite ripetute degli utenti.
Quando un browser richiede una risorsa, il server che fornisce la risorsa può dire al browser per quanto tempo deve temporaneamente archiviare o memorizzare nella cache questa risorsa. Per qualsiasi richiesta successiva di quella risorsa, il browser utilizzerà la sua copia locale anziché richiederne una nuova dalla rete.
Lighthouse contrassegna tutte le risorse statiche che non sono memorizzate nella cache:
Lighthouse considera una risorsa memorizzabili nella cache se soddisfa tutte le seguenti condizioni:
200, 203 o 206.Quando una pagina non supera l’audit, Lighthouse elenca i risultati in una tabella con tre colonne:
| URL | La posizione della risorsa memorizzabile nella cache |
| Cache TTL | La durata corrente della cache della risorsa |
| Size | Una stima dei dati salvati dagli utenti se la risorsa contrassegnata fosse stata memorizzata nella cache |
Consulta il post sul punteggio delle prestazioni di Lighthouse per sapere come viene calcolato il punteggio di rendimento complessivo della tua pagina.
Configurare il server per restituire l’intestazione della risposta HTTP Cache-Control :
Cache-Control: max-age = 31536000La direttiva max-age indica al browser per quanto tempo deve memorizzare nella cache la risorsa in secondi. Questo esempio imposta la durata su 31536000 , che corrisponde a 1 anno: 60 secondi × 60 minuti × 24 ore × 365 giorni = 31536000 secondi.
Quando possibile, memorizza nella cache le risorse statiche immutabili per un lungo periodo, ad esempio un anno o più.
Un rischio di inserire delle durate molto lunghe della cache è che i tuoi utenti non vedranno aggiornamenti ai file statici. È possibile evitare questo problema configurando lo strumento di compilazione per incorporare un hash nei nomi dei file delle risorse statiche in modo che ogni versione sia univoca, spingendo il browser a recuperare la nuova versione dal server. (Per informazioni su come incorporare gli hash utilizzando il webpack, consultare la Guida alla cache del webpack.)
Utilizzare no-cache se le risorse cambiano e la loro freschezza è importante, ma si desidera comunque ottenere alcuni dei vantaggi della velocità della cache. Il browser memorizza ancora nella cache una risorsa impostata su no-cache ma verifica prima con il server per assicurarsi che la risorsa sia ancora quella corrente.
Una durata della cache più lunga non è sempre la migliore soluzione, ma sta a te decidere quale sia la durata ottimale della cache per le tue risorse.
Esistono molte direttive per personalizzare il modo in cui il browser memorizza nella cache risorse diverse. Scopri di più sulle risorse di cache nella cache HTTP: la tua prima linea di guida alla difesa e Configurazione del codelab del comportamento della cache HTTP .
Per vedere quali risorse sta ricevendo il browser dalla sua cache, apri la scheda Rete in Chrome DevTools:
Control+Shift+J o (Command+Option+J su Mac) per aprire DevTools.La colonna SIZE in Chrome DevTools può aiutarti a verificare che una risorsa sia stata memorizzata nella cache:
Chrome serve le risorse più richieste dalla cache di memoria, che è molto veloce, ma viene cancellata alla chiusura del browser.
Per verificare che una risorsa sia impostata correttamente controlliamo l’intestazione Cache-Control :
