Come abilitare la memorizzazione nella cache del browser utilizzando Cloudflare in WordPress?

La memorizzazione nella cache del browser è una tecnica per velocizzare il tuo sito Web chiedendo al browser di archiviare o "memorizzare nella cache" i file statici per un periodo di tempo in modo che non debbano essere scaricati di nuovo nelle visite successive. Questo è tutto ciò che c'è da fare in poche parole.

In questo tutorial impareremo come aggiungere l'intestazione di scadenza in Cloudflare che sostanzialmente dice al browser per quanto tempo deve memorizzare nella cache le risorse statiche.

Se desideri utilizzare la memorizzazione nella cache del browser, devi dire ai browser Web per quanto tempo devono conservare immagini, CSS e file Javascript localmente sul browser client. Il browser dell'utente utilizzerà meno dati durante la navigazione delle pagine del tuo sito Web se vengono utilizzati determinati standard e impostazioni (perché deve scaricare meno file). L'uso della cache del browser in WordPress si traduce in un tempo di caricamento più rapido per il tuo sito web.

Che cos'è la memorizzazione nella cache del browser?

La memorizzazione nella cache è il processo di memorizzazione dei dati in una cache. Una cache non è altro che uno spazio di archiviazione temporaneo per i dati.

La memorizzazione temporanea di contenuti nei browser Web è denominata cache del browser. Il browser Web di un visitatore scarica e salva varie risorse del sito Web sull'unità locale. Immagini, file HTML e file JavaScript sono tra questi. La pagina Web verrà caricata rapidamente e il consumo di larghezza di banda verrà ridotto la prossima volta che l'utente visiterà il sito Web.

Vantaggi della memorizzazione nella cache

Le pagine Web possono essere precaricate e memorizzate nella cache su client, proxy e server. La memorizzazione nella cache online presenta una serie di vantaggi, tra cui prestazioni Web migliorate.

• La memorizzazione nella cache riduce il consumo di larghezza di banda, riduce il traffico di rete e riduce la congestione della rete.
• Per due motivi, la memorizzazione nella cache riduce la latenza di accesso:
  • a) I documenti visitati di frequente vengono recuperati da una cache proxy locale anziché da server di dati lontani, riducendo i ritardi di trasmissione.
  • b) Poiché la memorizzazione nella cache riduce il traffico di rete, i documenti che non sono memorizzati nella cache possono essere recuperati molto più velocemente di quanto non sarebbero senza di essa, grazie alla minore congestione lungo il percorso e al minor carico di lavoro del server.
• Distribuendo i dati tra le cache proxy attraverso la WAN, la memorizzazione nella cache riduce al minimo il carico di lavoro del server Web distante.
• Il client può acquisire una copia memorizzata nella cache sul proxy se il server remoto non è disponibile a causa di un arresto anomalo o del partizionamento di rete. Di conseguenza, la robustezza del servizio Web è migliorata.

Come funziona la memorizzazione nella cache del browser?

Una spiegazione di come funziona la memorizzazione nella cache del browser è mostrata nel grafico seguente.

Il server Web raccoglie i dati da un sito Web e li invia alla finestra del browser. A seconda che il visitatore sia un visitatore per la prima volta o abbia già visitato il sito, viene eseguita la memorizzazione nella cache.

Diamo un'occhiata a questi due esempi per vedere come funziona la memorizzazione nella cache.

Caso 1: un utente per la prima volta

Il grafico seguente mostra una circostanza in cui una persona sta visitando un sito Web per la prima volta.

Il browser Web raccoglie i dati dal server Web quando si accede a un sito Web per la prima volta. Ciò è dovuto al fatto che le risorse online non sono state ancora memorizzate nella cache. Il browser Internet salverà quindi le risorse online in una cache in modo che tu possa avere un'esperienza migliore la prossima volta che visiti il ​​sito web.

Caso 2: l'utente ha già visitato il sito web.

Se un utente visita un sito Web una seconda volta sullo stesso dispositivo informatico, la seconda visita verrà caricata rapidamente rispetto alla prima. Questo perché il browser Web utilizzerà la cache per ottenere risorse Web statiche come immagini, CSS e JavaScript. La pagina HTML verrà consegnata tramite il browser web.

Questo scenario del caso è illustrato nel grafico seguente.

La visualizzazione di cui sopra implica che le informazioni siano aggiornate. Il termine "contenuto fresco" si riferisce a materiale che non è ancora scaduto e può essere recuperato dalla cache. Il materiale non aggiornato è il contenuto che ha superato la data di scadenza della cache e può essere ottenuto solo dal server web.

Analizza il tuo sito utilizzando GTMetrix

Potresti aver notato l'errore "Aggiungi intestazioni in scadenza" se hai utilizzato GTmetrix per valutare il tuo sito.

Come controllare l'intestazione della cache nel tuo browser?

Le intestazioni di risposta vengono utilizzate dalla memorizzazione nella cache del browser. Il browser invia "intestazioni di richiesta" con ogni richiesta HTTP e il server risponde con "intestazioni di risposta" e i dati.

Il server specifica un'intestazione di risposta chiamata 'cache-control' che indica al browser quanto memorizzare nella cache i file (in secondi).

Fai clic sui tre punti (menu kebab) in alto a destra del tuo browser Chrome

Fare clic su Altri strumenti -> strumenti per sviluppatori

In Rete -> js troverai le cartelle richieste.

Aprire il file jquery e fare clic su Header per osservare il controllo della cache .

Come puoi vedere, i file della cache vengono caricati istantaneamente dall'unità o dalla memoria (RAM).

La memorizzazione nella cache del browser consente di eseguire le seguenti operazioni:

• Il carico del server dovrebbe essere ridotto.
• Riduci il tempo necessario per caricare una pagina
• Taglia i costi della larghezza di banda.

Come abilitare la memorizzazione nella cache del browser utilizzando Cloudflare (Aggiungi intestazioni di scadenza Cloudflare)?

Se utilizzi Cloudflare, puoi facilmente aggiungere intestazioni di scadenza a ciascuna richiesta con soli due clic e senza plug-in.

Vai alla dashboard di Cloudflare

Inserisci il tuo dominio

Fare clic su Caching -> Configurazione dal menu a sinistra

Scorri verso il basso fino a "Browser Cache TTL" e modifica la durata di conseguenza

Sarà impostato su 4 ore per impostazione predefinita. Cambialo in qualcosa che duri più di due mesi e il gioco è fatto!

Conclusione

La memorizzazione nella cache del browser è una strategia per migliorare il tuo sito Web indicando al browser di salvare o "memorizzare nella cache" i file per un determinato periodo di tempo in modo che non debbano essere recuperati di nuovo in più visite. In poche parole, questo è tutto quello che c'è da fare.

Se si desidera utilizzare la memorizzazione nella cache del browser, è necessario informare i browser Web per quanto tempo devono conservare le immagini, i file CSS e Javascript nel browser client. Se vengono applicati standard e impostazioni specifici, il browser dell'utente consumerà meno dati durante la navigazione nelle pagine del tuo sito web. L'utilizzo della cache del browser in WordPress riduce il tempo necessario per caricare il tuo sito web.