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 :
[ITA] - I cookie necessari sono assolutamente essenziali per il corretto funzionamento del sito Web. Questa categoria include solo i cookie che garantiscono funzionalità di base e caratteristiche di sicurezza del sito Web. Questi cookie non memorizzano alcuna informazione personale.
[ENG] - Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
[ITA] - Qualsiasi cookie che potrebbe non essere particolarmente necessario per il funzionamento del sito Web e viene utilizzato specificamente per raccogliere dati personali dell\'utente tramite analisi, pubblicità, altri contenuti incorporati sono definiti come cookie non necessari. È obbligatorio ottenere il consenso dell\'utente prima di eseguire questi cookie sul sito Web.
[ENG] - Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.