Come sfruttare la cache del browser in WordPress?

Pubblicato: 2022-06-25

In questo tutorial impareremo come sfruttare la cache del browser in WordPress per velocizzare il tuo sito.

Esistono diversi modi per velocizzare i siti Web WordPress in generale, tuttavia durante l'analisi dell'ottimizzazione della velocità del sito Web, la memorizzazione nella cache del browser è il problema riscontrato più frequentemente.

Puoi utilizzare una varietà di strumenti Internet, tra cui Google PageSpeed ​​Insights, GTMetrix e Pingdom, per monitorare e testare la velocità del tuo sito web. Ti danno risultati precisi e ti mostrano dove deve lavorare il tuo sito web. Potresti aver visualizzato l'avviso "Sfrutta la memorizzazione nella cache del browser" durante la valutazione della velocità del sito.

Puoi anche leggere: Servire risorse statiche con una politica di cache efficiente

Sommario

Che cos'è Sfrutta la memorizzazione nella cache del browser?

La memorizzazione nella cache è il periodo di tempo durante il quale i browser conservano le risorse memorizzabili nella cache di un sito Web sui loro sistemi locali.

Immagini, JavaScript, CSS e altre risorse sono tra questi. I materiali memorizzabili nella cache che vengono salvati sulla tua macchina vengono caricati nuovamente ogni volta che qualcuno vede il sito web. Pertanto, c'è un notevole aumento della velocità di caricamento del sito Web. Le persone desiderano utilizzare la cache del browser in WordPress per questo motivo.

Come funziona la memorizzazione nella cache del browser in WordPress?

Ci sono numerosi processi in esecuzione in background ogni volta che un utente entra in un determinato dominio.

Il tuo sito Web WordPress è reso visibile da tutto ciò che viene comunicato al browser dell'utente. Questi elementi del sito Web includono script, grafica, fogli di stile, contenuti e altro ancora. Quando necessario, devono essere trasferiti dal server del sito Web al browser dell'utente. Di seguito sono riportati i passaggi di questo processo:

  1. Un URL viene inserito nel browser del visitatore.
  2. Una richiesta viene effettuata dal browser al server che ospita il tuo sito web (la richiesta HTTP).
  3. L'utente riceve i dati dopo che sono stati assemblati dal server. Gli utenti iniziano a sperimentare un rallentamento a questo punto. Le persone possono ridurre al minimo le dimensioni degli script, ottimizzare le dimensioni dell'immagine e altre misure per fermare questa lentezza.
  4. Il browser può ora finalmente visualizzare il sito Web dopo che i dati sono stati trasferiti. Quando gli utenti accedono a pagine diverse, la procedura viene ripetuta. Prestazioni ridotte possono derivare dal server che riceve un gran numero di richieste tutte in una volta. Le persone devono quindi ottimizzare i loro siti web per mantenere la loro velocità.
Sfrutta la memorizzazione nella cache del browser in WordPress

Sia i browser Web che i programmi software utilizzano il contenuto memorizzato nella cache. Viene momentaneamente salvato sul disco locale. Il termine "Web Cache" o "HTTP Cache" si riferisce a questi dati. Il browser caricherà i dati dal tuo computer e scaricherà il contenuto del sito web ogni volta che visiti lo stesso sito web.

Devi utilizzare uno strumento particolare per determinare se il tuo sito Web WordPress utilizza efficacemente la memorizzazione nella cache del browser.

Differenza tra memorizzazione nella cache del browser e memorizzazione nella cache del server

Al fine di ridurre il carico e la latenza sui server Web, la memorizzazione nella cache sul lato server (per la memorizzazione nella cache sul lato server consigliamo sempre LiteSpeed ​​Cache per WordPress) spesso implica l'utilizzo di un proxy Web che memorizza le risposte Web dai server Web di fronte. La memorizzazione nella cache Web sul lato client può anche includere la memorizzazione nella cache basata su browser, che salva una copia memorizzata nella cache del contenuto Web a cui si accede in precedenza.

Questa procedura comporta l'utilizzo del server web per produrre pagine web memorizzate nella cache per il tuo sito web. Le suddette azioni sono un esempio di memorizzazione nella cache di pagine Web, che è principalmente lato server.

È possibile migliorare il sistema di memorizzazione nella cache del server in diversi modi. La scelta migliore sarebbe aggiornare le intestazioni di Apache. La fase successiva sarebbe quella di utilizzare i plugin di WordPress, quindi verrà aggiunto il CDN.

Metodo 1: sfrutta manualmente la memorizzazione nella cache del browser in WordPress

Nota: questo metodo funziona solo con LiteSpeed ​​Enterprise o Apache.

Includendo del codice nel file .htaccess, puoi sfruttare manualmente la memorizzazione nella cache del browser in WordPress. Per tre obiettivi distinti, devi effettivamente aggiungere tre bit di codice:

  1. Aggiungi le intestazioni di scadenza
  2. Aggiungi intestazioni di controllo della cache
  3. Disattiva gli ETag

Devi avere accesso ai file del tuo sito web per aggiungere questo codice, cosa che puoi ottenere accedendo al tuo account di hosting o CyberPanel.

Vai alla dashboard del tuo CyberPanel

Clicca su WordPress -> Elenca WordPress dal menu a sinistra

Entrerai nell'elenco dei siti Web WordPress . Da qui, fai clic sul titolo del tuo sito WordPress

Questo è il tuo CyberPanel WordPress Manager . Fare clic su File Manager.

In public_html troverai . file htaccess . Tieni presente che le regole di htaccess sono supportate solo da LiteSpeed ​​Enterprise. Non è supportato da OpenLite Speed. Fare clic destro su di esso e fare clic su CodeMirror

Aggiungi il codice seguente alla fine del file . contenuto del file htaccess copiandolo e incollandolo. Non modificare il file in nessun altro modo.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

Il suddetto codice indica al browser di fornire una copia cache delle risorse statiche anziché scaricarne una nuova.

Nelle impostazioni sono inclusi anche i tempi di aggiornamento/scadenza:

HTML impiega 600 secondi.
JavaScript e CSS per un mese
Per le immagini, un anno

I visitatori non dovranno scaricare risorse particolari troppo frequentemente grazie alle loro date di scadenza. Se necessario, puoi modificare rapidamente i tempi di scadenza.

Per stabilire le politiche di memorizzazione nella cache del browser su come una risorsa viene memorizzata nella cache, dove è memorizzata nella cache e l'età massima prima della scadenza, è necessario includere le intestazioni di controllo della cache. Non è necessario ripetere i tempi di scadenza come li abbiamo già menzionati in precedenza.

il codice seguente, quindi incollalo:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

I tag elettronici verranno disabilitati in modo che i browser debbano utilizzare le intestazioni di scadenza e il controllo della cache al posto della verifica dei file. Ecco la chiave:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Una volta terminato, fai clic su Salva .

Metodo 2: sfrutta la memorizzazione nella cache del browser in WordPress utilizzando i plugin

Un singolo errore può rovinare completamente il tuo sito Web, quindi modificare il file .htaccess può essere piuttosto pericoloso. Pertanto, puoi utilizzare plug-in come W3 Total Cache se non vuoi correre rischi inutili.

Plugin W3 Total Cache

Ecco come utilizzare W3 Total Cache, uno dei migliori plugin allo scopo, per sfruttare la memorizzazione nella cache del browser.

Entra nella tua dashboard di WordPress

Fai clic su Plugin -> Aggiungi nuovo dal menu a sinistra

Cerca W3 Total cache . Ora installa e attiva questo plugin

La scheda Performance apparirà nel menu a sinistra. Fare clic su Prestazioni -> Impostazioni generali dal menu a sinistra

Scorri verso il basso fino a Cache del browser e assicurati che sia abilitato e salva le modifiche

Ora fai clic su Prestazioni -> Cache del browser dal menu a sinistra

Assicurati che

  1. Imposta scadenza intestazione
  2. Imposta il controllo della cache
  3. Imposta tag entità

sono abilitati. Salva tutte le modifiche.

Plugin LiteSpeed ​​Cache

CyberPanel offre a ogni utente LiteSpeed ​​Cache per impostazione predefinita con ogni implementazione del sito WordPress. Se non utilizzi CyberPanel, puoi scaricarlo da qui.

Attivando semplicemente la funzione, il plug-in di memorizzazione nella cache LiteSpeed ​​Cache consente di sfruttare la memorizzazione nella cache del browser.

Accedi alla dashboard di WordPress

Fare clic su LiteSpeed ​​Cache -> Cache dal menu a sinistra

Fare clic sulla scheda Browser dalla barra in alto

Assicurati che Browser Cache sia abilitato e fai clic su Salva modifiche

Conclusione

Ricorda che a volte dopo aver installato un plug-in, non noterai subito le modifiche apportate. Il file CSS/Foglio di stile è responsabile di questo ritardo. Non sarai in grado di visualizzare le modifiche che hai apportato a causa della cache del browser che hai già salvato sul tuo computer. Si consiglia di utilizzare la funzione di navigazione in incognito del browser per visualizzare il sito Web in modo da vederlo correttamente dopo molteplici modifiche. Non consumerai le risorse della cache se utilizzi questa funzione e dovresti essere in grado di notare chiaramente le modifiche.

L'approccio che scegli per sfruttare la memorizzazione nella cache del browser è in definitiva irrilevante. Osservarlo in azione è l'unica cosa che conta. Il metodo che hai utilizzato per arrivarci è irrilevante fintanto che Sfrutta la memorizzazione nella cache del browser in WordPress funziona come previsto. Non esiste un approccio giusto o sbagliato; il risultato sarà lo stesso indipendentemente dalla tua scelta. Sfruttare la memorizzazione nella cache del browser migliorerà i tempi di caricamento sia che tu decida di apportare modifiche al file .htaccess o di utilizzare un plug-in.