Come risolvere il problema della memorizzazione nella cache del browser in WordPress nel 2021

Come risolvere sfruttando la memorizzazione nella cache del browser in WordPress

introduzione

Il caricamento del tuo sito web è lento? Cerchi una soluzione efficace per risolvere l'avviso di memorizzazione nella cache del browser in WordPress ? La velocità della pagina è un aspetto essenziale dell'esperienza dell'utente. In questo post, condividerò i punti di base e avanzati su come correggere la memorizzazione nella cache del browser in WordPress. Quindi, se anche tu stai affrontando questo problema, devi leggere il post completo per una migliore comprensione.

Il tempo impiegato per caricare la pagina richiesta nel browser dell'utente influenza notevolmente il fatto che l'utente stesso rimanga sul tuo sito, ad esempio, per concludere una vendita. Il tempo di caricamento della pagina dipende da diversi fattori: la cache del browser è uno di questi.

Per prima cosa esploreremo cos'è la Leverage Browser Caching e come può aiutare a velocizzare il tuo sito web. Quindi, vedremo come valutare se un sito WordPress necessita della memorizzazione nella cache del browser. Infine, esamineremo diversi modi per risolvere l'avviso di memorizzazione nella cache del browser in WordPress, con e senza l'uso di un plug-in.

Qual è la leva della cache del browser?

La cache è spazio di archiviazione temporaneo. Quando un visitatore richiede una pagina sul tuo sito web, il server raccoglie le informazioni necessarie dal database, le organizza in un documento HTML e le fornisce al browser. Il browser analizza questo documento e scarica tutte le risorse rilevanti per visualizzare la pagina.

La memorizzazione nella cache è il processo di archiviazione di una parte del payload della pagina in una cache per accelerare il caricamento delle pagine in futuro. La cache può essere presente sul server o sul dispositivo del visitatore.

Nella cache del server è possibile memorizzare le query del database e la risposta HTML statica per la pagina richiesta.

La leva della cache del browser è il processo di utilizzo temporaneo dell'archiviazione sul dispositivo del visitatore per archiviare risorse come fogli di stile, script e immagini per un periodo specificato.

Le visite successive a una pagina fanno sì che il browser scarichi le stesse risorse ripetutamente, ogni volta che l'utente richiede la pagina. Poiché queste risorse statiche costituiscono una quantità significativa di carico utile per un sito WordPress, la memorizzazione nella cache del browser riduce i tempi di caricamento della pagina.

È richiesta la memorizzazione nella cache del browser?

Un controllo sul sito web sulla distribuzione della dimensione delle risorse del tuo payload rivela generalmente quanto sono grandi le tue risorse e quante richieste deve inviare un browser per scaricarle prima di visualizzare la tua pagina. Se noti che una parte significativa della tua pagina web è costituita da file statici, dovresti considerare di memorizzare nella cache il tuo browser per migliorare la velocità della pagina.

Un modo più naturale per determinare se è necessaria la memorizzazione nella cache del browser è utilizzare uno strumento di test della velocità della pagina come GTmetrix. Basta inserire l'URL del tuo sito web per iniziare un test dettagliato. I risultati del test ti mostreranno come velocizzare il tuo sito web. Come puoi vedere, un avviso comune nella sezione dei risultati è l'utilizzo della cache del browser.

In alternativa, puoi utilizzare Think with Google, uno strumento di test della velocità delle pagine per valutare il tuo sito Web su dispositivi mobili. Una raccomandazione chiave di questo strumento è sfruttare la memorizzazione nella cache del browser per il tuo sito web.

PageSpeed ​​Insights, un altro strumento di Google per testare la velocità della pagina del tuo sito web, potrebbe suggerirti di creare una policy cache efficace per migliorare la velocità della pagina. La memorizzazione nella cache del browser è una parte importante di una politica della cache efficace.

Risolvi l'avviso di utilizzo della cache del browser in WordPress senza plug-in

Se non si desidera utilizzare un plug-in, è possibile modificare le impostazioni del server Web per correggere la leva della cache del browser. In questo caso, il server web indicherà al browser del visitatore di salvare risorse specifiche nella cache del browser. Il browser memorizzerà questi file localmente per un certo periodo e li utilizzerà durante le successive visite alla pagina.

La configurazione del server web per istruire i browser dei visitatori ad avviare la memorizzazione nella cache varia da server a server. In questo post, ti mostreremo come abilitare la cache del browser sui due server web più popolari: Apache e Nginx.

Puoi correggere la leva della cache del browser seguendo questi passaggi:

1. Aggiunta di intestazioni di scadenza: queste intestazioni indicano al browser quando richiedere una nuova versione di una risorsa dal server.
2. Modifica le intestazioni del controllo della cache: puoi utilizzare queste intestazioni per impostare i criteri della cache.
3. L'impostazione degli header di entity-tags (ETags): è possibile identificare se una risorsa sul server è cambiata rispetto al file locale.

Correggi la leva della cache del browser in Apache

1. Crea o modifica il file .htaccess

Su un server Apache, puoi impostare tutti i parametri necessari nel file .htaccess. Questo file consente di configurare manualmente le impostazioni di Apache. È un semplice file di testo che memorizza i parametri di Apache e imposta i permessi e le configurazioni per la directory in cui risiede.

Per saperne di più: Elenco di controllo SEO on-page: 10 suggerimenti per l'ottimizzazione attuabili per classificarsi meglio

Se inserisci un file .htaccess nella directory principale del tuo sito web, le sue regole verranno applicate a tutte le pagine del tuo sito. Puoi anche inserire un altro file .htaccess in una delle tue sottodirectory per impostare autorizzazioni specifiche solo per quella posizione. Nota che i file .htaccess di livello inferiore sovrascrivono le impostazioni dei file .htaccess nelle directory principali.

Se hai l'accesso da terminale al server, puoi accedere in remoto per creare un file .htaccess nella posizione appropriata (per le regole di memorizzazione nella cache del browser a livello di sito, questa dovrebbe essere la cartella principale).

In alternativa, se stai utilizzando il file manager cPanel, spostati nella posizione richiesta e crea un file .htaccess .

Se hai già un file .htaccess , puoi semplicemente aggiungere le nuove regole di memorizzazione nella cache del browser.

2. Aggiungi le intestazioni di scadenza

La prima impostazione nel file .htaccess è abilitare la funzione di scadenza delle intestazioni. Aggiungi la seguente riga al file:

ScadeAttivo il

Successivamente, puoi impostare il periodo per diversi file di testo utilizzando la sintassi mostrata di seguito:

ExpiresByType text / CSS "accedi 1 mese"

ExpiresByType testo / HTML "accedi 1 mese"

Per impostare una data di scadenza per le immagini, usa l'immagine invece della barra del testo e l'estensione dell'immagine.

ExpiresByType image / jpeg "accedi 1 mese"

ExpiresByType image / svg "accedi 1 mese"

Per impostare la scadenza della domanda, utilizzare l'applicazione e specificare l'estensione del file.

ExpiresByType application / pdf “accedi 1 mese”

Per tutti gli altri file non coperti da alcuna impostazione specifica, utilizzare la definizione ExpiresDefault:

Scade come predefinito "accesso 1 mese".

3. Definire una politica della cache

Successivamente, è necessario definire i criteri della cache utilizzando le impostazioni di Verifica cache.

Esistono tre parti principali di una politica della cache:

• come viene memorizzata una risorsa nella cache
• la posizione della cache
• il tempo prima della scadenza della risorsa

Una cache pubblica indica al browser che le risorse possono essere memorizzate nella cache ovunque. Al contrario, una cache privata consente l'archiviazione solo sul dispositivo client.

Ad esempio, la pagina del profilo di un utente connesso deve essere memorizzata nella cache solo sul dispositivo client.

Al contrario, anche la home page di un blog può essere memorizzata nella cache su una CDN. È possibile impostare una politica della cache pubblica aggiungendo la seguente regola:

<IfModule mod_headers.c>

Set di intestazione per il controllo della cache pubblica

</ IfModulo>

Puoi anche specificare criteri diversi per diversi tipi di file aggiungendo i seguenti filtri al modulo di intestazione:

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

Set di intestazione per il controllo della cache pubblica

</FileMatch>

<filesMatch “\. (php) $”>

Set di intestazione per il controllo della cache privata

</FileMatch>

</ IfModulo>

Il codice sopra specifica che il browser può archiviare file di immagine ovunque, ma i file PHP devono essere archiviati sul dispositivo client.

Puoi anche aggiungere una configurazione di scadenza a ogni regola di corrispondenza dei file. Il tempo di scadenza deve essere definito in secondi. Impostandolo a zero, il browser deve richiedere il file ad ogni caricamento della pagina:

Il set di intestazione scade a 0

4. Disabilita i tag di entità in Apache

Infine, è necessario disabilitare gli Entity Tags utilizzando il seguente codice:

FileETtag Nessuno

La disabilitazione di ETag richiede che il browser si basi sui criteri della cache ed eviti di riconvalidare i file ogni volta che viene caricata una pagina.

Salva il file .htaccess e riavvia Apache per rendere effettive le modifiche.

Risolvi lo sfruttamento della memorizzazione nella cache del browser in Nginx

In Nginx, puoi trovare il file di configurazione nginx.conf nella posizione /etc/nginx/site-enabled/default.

Puoi aggiungere un'intestazione Expires a tipi di file specifici utilizzando il codice seguente:

posizione ~ * \. (ico | jpeg | jpg | png) $ {

scade 30d;

}

Puoi anche aggiungere un'intestazione Cache-Control allo stesso blocco di codice:

posizione ~ * \. (ico | jpeg | jpg | png) $ {

scade 30d;

add_header Controllo cache “pubblico”;

}

Salva il file di configurazione e riavvia Nginx per rendere effettive le modifiche.

Risolvi la Leverage Browser Cache con un plugin

Se stai utilizzando un plug-in di memorizzazione nella cache per WordPress, potrebbe già avere il supporto per la memorizzazione nella cache del browser.

Ora vediamo come risolvere la leva della cache del browser con alcuni dei più famosi plugin di cache.

1. WP Rocket

WP Rocket è uno dei plugin per WordPress più veloci e consigliati in grado di gestire tutte le ottimizzazioni di velocità con pochi clic. WP Rocket non solo ti consente di risolvere la leva della cache del browser, ma ti consentirà di ottimizzare il tuo sito utilizzando varie tecniche come:

• compressione file statica (GZip) – per ridurre la dimensione totale dei dati (leggi il post completo su come abilitare la compressione GZip in WordPress)
• abilita la cache dei file (incluso il precaricamento della cache) – per stressare meno il server (e recuperare una copia pre-scansionata di ogni pagina)
• Ottimizzazione dei caratteri di Google : per assicurarti che i caratteri più massicci vengano caricati rapidamente,
• Caricamento lento - in modo che le immagini vengano addebitate solo quando l'utente scorre fino alla sezione di una pagina in cui è richiesta l'immagine
• Minimizzazione e combinazione : riduzione delle dimensioni e combinazione di risorse di testo per distribuirle più rapidamente all'utente finale
• Posticipa il caricamento di JS , in modo che la pagina venga visualizzata rapidamente invece di attendere il download di tutte le risorse.
• Integra e abilita una rete CDN, in modo che le immagini più pesanti vengano consegnate più velocemente
• Prelettura DNS : per ridurre il tempo necessario per risolvere l'origine del contenuto di terze parti

Tutto questo può sembrare incomprensibile a chi non è direttamente coinvolto nell'ottimizzazione di un sito web. Tuttavia, in realtà, queste sono tutte misure che dovrai adottare se vuoi velocizzare WordPress.

Consigliamo vivamente di leggere la nostra recensione su WP Rocket,

2. LiteSpeed ​​​​Cache

LiteSpeed ​​​​Cache è un plug-in di memorizzazione nella cache che consente di risolvere la leva della memorizzazione nella cache del browser semplicemente abilitando la funzione. Installa e attiva il plugin e vai alle impostazioni della cache. Passa alla scheda Browser e consenti l' opzione Cache del browser .

È anche possibile impostare il tempo di scadenza. Tieni presente, tuttavia, che questa impostazione si applica a tutti i file memorizzati nella cache del sito Web.

3. La cache più veloce del WP

WP Fastest Cache è un altro plugin per la cache di WordPress con semplici opzioni di personalizzazione. La versione gratuita consente di abilitare la memorizzazione nella cache del browser. Vai alla pagina delle impostazioni e seleziona la casella di controllo per la memorizzazione nella cache del browser.

4. Cache totale W3

W3 Total Cache è un altro plugin per la cache del browser ampiamente utilizzato. Ti consente di personalizzare un'ampia gamma di opzioni di memorizzazione nella cache. Una volta installato, vai alla sezione Cache Browser nella pagina delle impostazioni.

Questo plugin ti consente di impostare i permessi per una serie di categorie di file, come immagini, script e fogli di stile. Per ogni gruppo, puoi impostare le intestazioni di Expires, la durata di Expires e gli ETag.

Domande frequenti

Conclusione

In questo post, abbiamo esplorato l'importanza della velocità della pagina e perché dovresti correggere la leva della cache del browser in WordPress. Abbiamo visto strumenti di test della velocità che indicano se il tuo sito WordPress necessita della memorizzazione nella cache del browser. Successivamente, abbiamo discusso su come configurare i vari server Web per abilitare la memorizzazione nella cache del browser senza utilizzare un plug-in. Infine, abbiamo esaminato tre plugin popolari che ti consentono di correggere la leva della cache del browser in WordPress.