Sfrutta la memorizzazione nella cache del browser.

Questa regola viene attivata quando PageSpeed Insights rileva che la risposta del server non include intestazioni esplicite di memorizzazione nella cache o se è stato specificato che le risorse devono essere memorizzate nella cache solo per un breve periodo di tempo.

Panoramica.

La memorizzazione delle risorse statiche nella cache del browser può far risparmiare tempo agli utenti se visitano il tuo sito più di una volta. Le intestazioni di memorizzazione nella cache devono essere applicate a tutte le risorse statiche memorizzabili nella cache, non solo a un piccolo sottoinsieme (come le immagini). Le risorse memorizzabili nella cache includono i file JS e CSS, i file immagine e altri file di oggetti binari (file multimediali, PDF e così via). In generale, il codice HTML non è statico e non dovrebbe essere considerato memorizzabile nella cache per impostazione predefinita. Devi valutare quale norma di memorizzazione nella cache è più adatta al codice HTML del tuo sito.

Consigli.

Attiva la memorizzazione nella cache per il tuo server. Le risorse statiche devono restare memorizzate nella cache per almeno una settimana. Le risorse di terze parti come gli annunci o i widget devono invece restare memorizzate nella cache per almeno un giorno. Sono consigliate le seguenti impostazioni per tutte le risorse memorizzabili nella cache:

• Imposta Expires su minimo una settimana e, preferibilmente, massimo un anno nel futuro. L'intestazione Expires è preferibile rispetto a Cache-Control: max-age dal momento che è maggiormente supportata. Non impostarla su più di un anno nel futuro, poiché questo vìola le linee guida RFC.
• Se sai esattamente quando una risorsa verrà modificata, puoi impostare una scadenza più breve. Tuttavia, se ritieni che potrebbe essere modificata a breve senza sapere il momento esatto, devi impostare una scadenza lunga e utilizzare le fingerprint dell'URL (descritto di seguito).

Expires e Cache-Control: intestazioni di durata massima.

Queste intestazioni specificano il periodo di tempo durante il quale il browser può utilizzare la risorsa memorizzata nella cache senza verificare se è disponibile una nuova versione nel server web. Si tratta di "intestazioni complesse di memorizzazione della cache" che vengono applicate senza condizioni. Dopo che sono state impostate e che la risorsa è stata scaricata, il browser non invierà alcuna richiesta GET per la risorsa finché non viene raggiunta la data di scadenza o la durata massima o la cache viene svuotata dall'utente.

Intestazioni Last-Modifed ed ETag.

Queste intestazioni specificano in che modo il browser deve stabilire se i file sono gli stessi ai fini della memorizzazione nella cache. Nell'intestazione Last-Modified, questo corrisponde a una data. Nell'intestazione ETag, invece, può essere qualsiasi valore che identifica una risorsa in modo univoco (solitamente versioni di file o hash di contenuti). Last-Modified è un'intestazione "debole" di memorizzazione nella cache, poiché il browser applica un procedimento euristico per stabilire se recuperare l'elemento dalla cache o meno.

Queste intestazioni consentono al browser di aggiornare in modo efficiente le risorse memorizzate nella cache inviando richieste GET condizionale quando l'utente ricarica esplicitamente la pagina. Le richieste GET condizionale non restituiscono la risposta completa a meno che la risorsa sia stata modificata sul server e abbia, pertanto, minore latenza delle richieste GET complete.

Quali intestazioni di memorizzazione nella cache devo utilizzare?

È importante specificare un'intestazione Expires o Cache-Control max-age e un'intestazione Last-Modified o ETag per tutte le risorse memorizzabili nella cache. È superfluo specificare entrambe le intestazioni Expires e Cache-Control: max-age o entrambe le intestazioni Last-Modified e ETag.

Utilizzo di fingerprint dell'URL.

Per le risorse che vengono modificate saltuariamente, il browser può memorizzare la risorsa nella cache fino a quando questa non viene modificata sul server; dopodiché il server comunicherà al browser che è disponibile una nuova versione. A tal fine, puoi assegnare un URL univoco a ogni versione della risorsa. Ad esempio, supponiamo di avere una risorsa denominata "my_stylesheet.css". Possiamo rinominare il file "my_stylesheet_fingerprint.css".

Quando la risorsa subisce una modifica, viene modificata anche la fingerprint e, di riflesso, l'URL. Non appena l'URL viene modificato, il browser riceve l'istruzione di recuperare nuovamente la risorsa. L'utilizzo di fingerprint ci consente di impostare date di scadenza lontane nel futuro anche per le risorse che vengono modificate con maggiore frequenza.

Un modo comune di creare fingerprint è mediante un numero esadecimale a 128 bit che codifica l'hash dei contenuti del file.

Un'altra strategia consiste nel creare una nuova directory di versione per ogni nuova versione dell'applicazione, inserendo tutti gli asset di ciascuna versione nella directory corrispondente. L'inconveniente di questa strategia è che se un asset non subisce modifiche da una versione all'altra, l'URL verrà comunque modificato forzando un nuovo download. L'utilizzo degli hash di contenuti non risente di questo problema ma è leggermente più complesso.

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog: