Come trasferire file ed impostazioni da un computer vecchio ad un computer nuovo
25 febbraio 2017
Social Privacy – Come tutelarsi nell’era dei Social Network
14 marzo 2017
Mostra tutti

PageSpeed Insights – Come sfruttare la memorizzazione nella cache del browser

PageSpeed Insights – Come sfruttare 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.

PageSpeed Insights, browser, cache, Google,

Cosa è PageSpeed Insights

PageSpeed Insights misura il rendimento di una pagina per dispositivi mobili e dispositivi desktop. Recupera l’URL due volte: una per lo user-agent per dispositivi mobili e una per lo user-agent per dispositivi desktop.

Il punteggio PageSpeed va da 0 a 100 punti. I punteggi più elevati sono migliori. Più in particolare, un punteggio di almeno 85 indica un buon rendimento della pagina. Tieni presente che PageSpeed Insights viene costantemente migliorato. Pertanto, il punteggio viene modificato man mano che vengono aggiunte nuove regole o che viene ottimizzata l’analisi.

PageSpeed Insights misura in che modo è possibile migliorare il rendimento della pagina con riferimento ai seguenti elementi:

  • tempo di caricamento dei contenuti above the fold: tempo trascorso dal momento in cui un utente richiede una nuova pagina a quello in cui il browser visualizza i contenuti above the fold.
  • tempo di caricamento completo della pagina: tempo trascorso dal momento in cui un utente richiede una nuova pagina a quello in cui il browser la visualizza completamente.

Il rendimento di una connessione di rete, tuttavia, varia considerevolmente. Pertanto, PageSpeed Insights considera soltanto gli aspetti del rendimento della pagina che non dipendono dalla rete: la configurazione del server, la struttura HTML di una pagina e il relativo utilizzo delle risorse esterne quali immagini, file JavaScript e codici CSS. L’implementazione dei suggerimenti dovrebbe consentire di migliorare il rendimento relativo della pagina. Il rendimento assoluto della pagina, invece, continuerà a dipendere dalla connessione di rete dell’utente.

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.

Credits: developers.google.com

Valutazione Media
Last Reviewer
Reviewed Item
PageSpeed Insights - Come sfruttare la memorizzazione nella cache del browser
Rating
51star1star1star1star1star
Rocco Balzamà

Rocco Balzamà

Admin & CEO Rocco Balzamà Studio & Agency at ErreBi Group S.r.l.
Ethical Hacker | Blogger | Developer | Graphic & Web Designer | Consulente d'Immagine | Social Media Marketing Manager | Copywriter | SEO Specialist | Digital Influencer