Tutto sulla cache del browser! Il nostro articolo XXL sull'aumento della velocità delle pagine

Grazie alla cache del browser, i file non devono essere scaricati più volte quando si richiama un sito web, ma vengono memorizzati nel browser.

 

Gli utenti traggono vantaggio dal fatto che il tempo di attesa per il caricamento completo di un sito web è ridotto. La riduzione dei tempi di caricamento delle pagine comporta vantaggi anche per i gestori dei siti web: Grazie alla maggiore velocità delle pagine (velocità di caricamento delle pagine), il posizionamento nei motori di ricerca viene influenzato positivamente.

 

Scoprite tutto quello che c'è da sapere sul caching del browser e su come utilizzarlo correttamente nel nostro post!

 

Che cos'è la cache del browser?

La cache del browser è la cache di un browser web in cui vengono memorizzate le copie delle risorse a cui si è già acceduto (ad esempio, immagini, file JavaScript, video).

 

Se una pagina Internet è già stata visitata una volta e alcune risorse sono state salvate nella cache del browser, la pagina viene caricata più velocemente alla seconda visita. Il motivo è che i dati non devono essere scaricati nuovamente, ma possono essere recuperati dalla cache.

 

Si può immaginare il processo di caching del browser come segue:

 

• Quando si visita per la prima volta una determinata pagina di Internet, tutti gli elementi di questa pagina devono essere scaricati. La visita di un sito web comporta quindi sempre il download di dati.
• Alcuni elementi dei siti web cambiano regolarmente, altri sono statici. Gli elementi statici dei siti web sono adatti alla cache del browser. Vengono memorizzati nella cache del browser.
• Al successivo richiamo della pagina, il browser accede alle risorse memorizzate nella cache. Di conseguenza, deve richiedere meno dati al server e il server deve inviare meno dati.

 

Il concetto di caching è molto diffuso. Viene utilizzato anche dai server proxy nelle reti di computer più grandi, ad esempio . Se il numero di partecipanti alla rete è elevato, il server proxy fa in modo che le risorse della cache vengano inviate agli utenti. Ciò significa che non deve inoltrare la richiesta del client al server e non è necessario attraversare Internet per recuperare le risorse.

 

Già la semplice definizione di cache del browser rivela il suo grande vantaggio: ottimizza la velocità di caricamento. Poiché la comunicazione con il server è più breve e le risorse possono essere recuperate direttamente dalla memoria, possono essere rese disponibili più rapidamente.

 

Vantaggio: Velocità

Il vantaggio della cache del browser è l'ottimizzazione della velocità di caricamento. In qualità di agenzia SEO, noi di Specht GmbH utilizziamo il browser caching per aumentare la velocità di caricamento delle pagine. Un'elevata velocità della pagina è uno dei fattori di ranking più importanti per i motori di ricerca come Google.

 

Quanto più velocemente l'intero sito web e tutte le relative sottopagine vengono caricate dagli utenti, tanto maggiori sono le possibilità di ottenere un buon posizionamento nei risultati di ricerca. Un posizionamento elevato nei risultati di ricerca va di pari passo con una migliore visibilità, un maggior numero di visitatori del sito e un più rapido raggiungimento dei vostri obiettivi individuali. Il miglioramento della velocità delle pagine ha anche un effetto positivo sull'esperienza dell'utente (UX).

 

Nell'ambito della SEO on-page, è necessario utilizzare in particolare le seguenti opzioni per migliorare il tempo di caricamento:

 

• Compressione delle immagini
• Rimozione di plug-in superflui dal CMS
• Utilizzo della cache del browser

 

Google supporta i gestori di siti web (webmaster), gli esperti SEO e le agenzie di marketing online nell'ottimizzazione dei motori di ricerca. Mette a disposizione numerosi strumenti utili per l'ottimizzazione del proprio sito web, come Google Search Console e Google Analytics. Il gestore del motore di ricerca fornisce anche strumenti per ridurre il tempo di caricamento dei siti web con Google Pagespeed Insights uno strumento SEO utile per ridurre i tempi di caricamento dei siti web.

 

Svantaggio: tempestività

Uno svantaggio delle cache dei browser è la loro potenziale limitata attualità. L'utente non può sapere quando i webmaster aggiornano singole sottopagine o addirittura interi siti web. Le risorse memorizzate nella cache possono risultare non aggiornate dopo gli aggiornamenti.

 

Sia i webmaster che gli utenti hanno la responsabilità di evitare il problema dei contenuti non aggiornati. I webmaster decidono se utilizzare il caching e quali risorse devono essere memorizzate nella cache e per quanto tempo - nella prossima sezione discuteremo di come i webmaster possono definire correttamente le regole per il caching.

 

Mentre i webmaster sono chiamati a selezionare solo le risorse statiche da inserire nella cache per garantire l'aggiornamento dei dati, gli utenti hanno la responsabilità di svuotare regolarmente la cache. La cancellazione della cache elimina tutti i contenuti in essa memorizzati.

 

Se una pagina viene ricaricata dopo che la cache è stata svuotata, tutti gli aggiornamenti della pagina vengono visualizzati. Inoltre, le risorse statiche aggiornate e quindi nuove vengono memorizzate nella cache, in modo che i nuovi contenuti vengano caricati dalla cache la volta successiva. Svuotare regolarmente la cache ha anche il vantaggio di ridurre il carico sul disco rigido del dispositivo finale e, di conseguenza, di aumentare nuovamente le prestazioni del dispositivo finale.

 

 

Definire correttamente le regole per il salvataggio delle risorse nella cache del browser

L'implementazione della cache presenta due aspetti: quello teorico e quello pratico. Nella prossima sezione approfondiremo l'aspetto pratico. In primo luogo, vorremmo approfondire le conoscenze teoriche sul caching che abbiamo già trattato in questo post, in modo da comprendere ancora meglio la parte pratica. Finora avete capito tutto:

 

• La memorizzazione nella cache delle risorse del vostro sito web nel browser dell'utente ha perfettamente senso, in quanto contribuisce ad aumentare la velocità di caricamento del vostro sito e di tutte le sottopagine.
• Per garantire che le risorse memorizzate nella cache del browser siano aggiornate, i webmaster devono definire correttamente le regole per il caching.
• Anche gli utenti sono responsabili: si raccomanda di svuotare regolarmente la cache per garantire che i dati siano aggiornati.

 

Quando si definiscono le regole per il caching come webmaster, è meglio distinguere tra tre periodi di tempo: a lungo termine, a medio termine e a breve termine. Ogni risorsa viene assegnata a uno di questi periodi di tempo. In questo modo si garantisce che la risorsa in questione venga automaticamente rimossa dalla cache se la sua attualità viene messa a rischio.

 

Raccomandazioni: Quando quali risorse devono essere caricate dalla cache

Per garantire che le risorse nella cache del browser siano aggiornate, in qualità di webmaster dovreste memorizzare nella cache solo risorse statiche a lungo termine (ad esempio, per un mese o un anno). Esempi di risorse statiche sono i file JavaScript e i file CSS. Ecco una panoramica delle risorse adatte alla cache:

 

• CSS, HTML e JavaScript
• File di immagine come JPG, JPEG, PNG e GIF
• File oggetto come video e PDF

 

Prendiamo ad esempio le immagini: Il logo di un'azienda o l'infografica di un articolo informativo non cambiano mai o solo dopo diversi anni. Le immagini come i loghi possono quindi essere memorizzate nella cache del browser a lungo termine senza problemi, in quanto rimangono aggiornate per molto tempo, ad esempio oltre un anno.

 

Il fatto che risorse come CSS, HTML e JavaScript possano essere salvate nella cache del browser significa che è possibile salvare , ad esempio, il layout di una pagina . Il salvataggio dei file CSS, in particolare, ha un effetto positivo sulle prestazioni dei siti web. I file CSS possono essere salvati per un periodo di un mese.

 

Tutti gli altri file che cambiano regolarmente, magari anche più volte nell'arco di una giornata, dovrebbero essere memorizzati nella cache del browser per un massimo di qualche ora. I file HTML sono un esempio di periodi di cache a breve termine. Vengono utilizzati, tra l'altro, per la formattazione dei testi. Poiché i testi vengono cambiati spesso, tutti i file associati dovrebbero essere ricaricati ogni volta, se possibile.

 

Intestazione: le informazioni sono memorizzate qui

Nella struttura della pagina c'è la cosiddetta intestazione. Queste definiscono le regole che governano, ad esempio, lo scambio di informazioni tra il browser e il server o il crawling da parte degli algoritmi di Google. Poiché anche le regole per la cache sono memorizzate nelle intestazioni, esse svolgono un ruolo centrale nella cache del browser.

 

I comandi sono usati nell'intestazione della cache per specificare quale risorsa o file può essere messo in cache. Se non viene impostata alcuna informazione corrispondente, non viene eseguita la cache. Si distingue tra due intestazioni di cache: l'intestazione Cache-Control e l'intestazione Expires.

 

L'intestazione Cache-Control contiene informazioni su quali risorse o file possono essere messi in cache. Le seguenti istruzioni sono comuni:

 

• no-cache: Il browser può memorizzare nella cache, ma deve chiedere al server se la risorsa in questione è l'ultima versione.
• pubblico: la risorsa può essere salvata nella cache.
• privato: la risorsa può essere salvata nella cache, ma solo dal browser e non da eventuali server proxy esistenti.
• no-store: Non è consentito memorizzare temporaneamente la risorsa.

 

Mentre l'intestazione Cache-Control indica quali risorse e file possono essere memorizzati dove, l'intestazione Expires è usata per definire i periodi di tempo per la cache. Le raccomandazioni della sezione precedente di questo blog post possono essere implementate in questa intestazione di cache: Nominando specificamente un periodo di tempo nell'intestazione Expires, il browser sa a partire da quale momento deve richiedere al server una nuova copia della risorsa o del file in questione e metterla in cache.

 

 

Implementazione: come utilizzare correttamente la cache del browser!

Esistono due modi per implementare la cache. Il modo più semplice è quello di utilizzare i plug-in del CMS, mentre il modo più complicato, con un maggiore controllo sulla cache, è quello di modificare il file htaccess.

 

Impostare la cache tramite il file htaccess

Il file htaccess si trova nella directory principale del sito web con il nome ".htaccess". Aprite il file htaccess e per prima cosa attivate la cache del browser tramite il modulo "mod_headers" utilizzando il seguente comando come amministratore:

 

intestazioni a2enmod
/etc/init.d/apache2 restart

 

Successivamente, è possibile specificare i tipi di file da memorizzare nella cache. Da un lato, è possibile riassumere tutti i tipi di file, come in questo esempio:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|ico|jpeg|jpg|png|css|js)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
</IfModule>

 

In secondo luogo, quando si definiscono i tipi di file per la cache, si possono impostare diverse impostazioni predefinite per i diversi tipi di file, semplicemente iniziando una nuova riga di corrispondenza dei file:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|jpg|jpeg|png)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
<FilesMatch „\.(css|js)$“>
Header set Cache-Control „max-age=2592000, public“
</FilesMatch>
</IfModule>

 

La specifica "max-age" indica per quanti secondi (ad esempio 604.800 secondi = una settimana) un file deve essere conservato nella cache. Le abbreviazioni gif, jpg, jpeg e png sono formati per le immagini, mentre css e js indicano rispettivamente i file CSS e JavaScript.

 

Il browser preferisce sempre le informazioni contenute nel modulo "mod_headers" appena citato. Le informazioni contenute nel modulo alternativo "mod_expires" vengono prese in considerazione solo se non ci sono specifiche in "mod_headers" su quanto tempo i file devono essere memorizzati nella cache prima di essere richiesti nuovamente al server. In qualità di webmaster, il modulo Expires offre una migliore visione d'insieme.

 

Se specificare i periodi di cache in "mod_headers" richiede troppo tempo, avviare il modulo Expires con il seguente comando:

 

a2enmod scade
/etc/init.d/apache2 restart

 

D'ora in poi, è possibile riempire l'intestazione Expires con tutte le informazioni importanti per i periodi di caching impostando, ad esempio, le seguenti istruzioni:

 

<IfModule mod_expires.c>

ScadenzaAttivo su

ExpiresByType image/jpg "accesso 1 anno"

ExpiresByType image/jpeg "accesso 1 anno"

ExpiresByType text/css "accesso 1 mese"

ExpiresByType application/javascript "accesso 1 mese".

ExpiresByType application/x-javascript "accesso 1 mese"

ExpiresByType application/x-shockwave-flash "accesso 1 mese"

ExpiresByType image/x-icon "accesso 1 anno"

ExpiresByType text/html "accesso più 300 secondi".

</IfModule>

 

L'ultima riga "ExpiresByType text/html" fornisce informazioni sulla durata della memorizzazione nella cache dell'intera pagina, cioè di tutti i contenuti.

 

Poiché i testi delle pagine HTML cambiano regolarmente, sono stati stabiliti periodi di caching da 180 a 600 secondi per le pagine HTML, a condizione che queste pagine siano visitate frequentemente e/o che il contenuto delle pagine sia aggiornato frequentemente dagli operatori del sito web.

 

Impostazione della cache con l'aiuto di plug-in

Il CMS (content management system; sistema per la creazione e la gestione di siti web) più diffuso è WordPress. Esistono plug-in per WordPress che consentono di ampliare la gamma di funzioni. Alcuni plug-in sono specializzati nel caching. Ad esempio, i seguenti plug-in per WordPress consentono di impostare e gestire il caching nel browser:

 

• WP Rocket
• W3 Total Cache
• WP Cache più veloce
• WP Super Cache
• WP Velocità della luce
• Ottimizzatore SG
• Prestazioni rapide
• Colibrì
• Abilitatore della cache
• Cache della cometa

 

Questi 10 plug-in di WordPress sono già sufficienti per impostare una cache personalizzata nel browser, che aumenta le prestazioni dell'intero sito web e migliora significativamente l'esperienza dei visitatori aumentando la velocità di caricamento del sito.

 

Grazie ai plug-in di WordPress, i non addetti ai lavori senza alcuna conoscenza tecnica possono facilmente regolare la cache nel browser. Inoltre, alcuni plug-in di WordPress (ad esempio WP Rocket; Swift Performance) presentano ulteriori vantaggi. Contribuiscono a migliorare in modo globale le prestazioni e i tempi di caricamento del sito web.

 

Conclusione: impostate la cache e ottenete notevoli vantaggi SEO!

In qualità di webmaster o di esperto SEO, impostate il caching sui siti web e ottenete vantaggi di vasta portata nell'ottimizzazione dei motori di ricerca! Con l'aiuto di plug-in per WordPress e altri sistemi di gestione dei contenuti, il caching è facile da implementare anche per i non esperti.

 

Se avete conoscenze tecniche di base, non avete nemmeno bisogno di plug-in e utilizzate alcuni semplici comandi nell'intestazione delle vostre pagine per personalizzare il caching del browser e offrire ai visitatori del vostro sito web una buona esperienza d'uso.

 

FAQ: Domande e risposte sull'argomento "Browser caching".

In quest'ultima sezione del nostro blog abbiamo riassunto alcune delle domande più frequenti poste dagli utenti. Se anche voi avete una domanda, come esperti di ottimizzazione dei motori di ricerca saremo lieti di fornirvi una risposta adeguata. Contattateci e vi risponderemo!

 

In che modo i visitatori del sito web possono influenzare il caching?

Gli utenti di Internet possono influenzare il caching in vari modi. Ad esempio, possono disattivare completamente il caching nelle impostazioni del browser. In questo modo, nel browser dell'utente non viene salvata nemmeno una risorsa o un file, indipendentemente dalle istruzioni del webmaster.

 

Inoltre, i visitatori del sito web possono impostare un'età massima per le risorse o definire regole di caching per una singola pagina web che differiscono dalle regole di caching per il resto del sito. È inoltre sempre possibile svuotare la cache.

 

Come posso cancellare la cache del browser?

Questo processo varia a seconda del browser.

 

Con Google Chrome, i visitatori di un sito web possono eliminare la cache aprendola con la combinazione di tasti "Ctrl + Shift + Del". Quindi possono selezionare le immagini e gli altri oggetti presenti nella cache e avviarne l'eliminazione.

 

Gli utenti possono cancellare la cache anche in Internet Explorer utilizzando la stessa combinazione di tasti di Google Chrome. Dopo aver utilizzato la combinazione di tasti, si apre una finestra con l'informazione "Cancella dati del browser". Selezionando l'opzione "Dati e file memorizzati nella cache" e facendo clic su "Cancella", la cache del browser viene svuotata.

 

La volta successiva che si visita un sito web precedentemente visitato, i file della cache non vengono più utilizzati dopo che la cache è stata svuotata. Il browser richiede invece al server la versione corrente di un sito web.

 

Qual è la differenza tra la cache del browser e la cache del server?

Mentre la cache del browser memorizza le risorse sul disco rigido del visitatore del sito web, la cache del server le memorizza sul server del webmaster. La cache del server contribuisce quindi anche a una maggiore velocità di caricamento delle pagine.

 

Le differenze tra la cache del browser e quella del server risiedono quindi nei livelli di gestione dei dati, poiché i diversi tipi di dati vengono memorizzati in posizioni diverse.