Il tuo sito web si carica lentamente e stai cercando una soluzione efficace per risolvere l’avviso leverage browser caching in WordPress?
La velocità della pagina è un aspetto importante dell’esperienza utente. Il tempo impiegato per il caricamento della pagina richiesta nel browser dell’utente influisce enormemente sul fatto che l’utente stesso rimanga sul tuo sito, ad esempio, per completare una vendita.
Il tempo di caricamento della pagina dipende da diversi fattori: la cache del browser è uno di questi. In questo post, vedremo come risolvere l’avviso “leverage browser caching” (sfrutta la memorizzazione nella cache del browser) in WordPress, un noto suggerimento di ottimizzazione delle prestazioni raccomandato da strumenti di test della velocità della pagina come GTMetrix e Pingdom.
Esploreremo innanzitutto cos’è il Leverage Browser Caching e in che modo può aiutare ad accelerare 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 leverage browser caching in WordPress, con e senza l’uso di un plugin.
Cos’è il leverage browser caching?
La cache è uno 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 pertinenti per visualizzare la pagina.
La memorizzazione nella cache è il processo di archiviazione di una parte del payload della pagina in una cache per velocizzare il caricamento delle pagine in futuro. La cache può essere presente sul server o sul dispositivo del visitatore.
Nella cache del server, è possibile memorizzare i risultati delle query del database e / o la risposta HTML statica per la pagina richiesta.
Il leverage browser caching è il processo di utilizzo dell’archiviazione temporanea sul dispositivo del visitatore per archiviare risorse come fogli di stile, script e immagini per un periodo di tempo specificato.
Le successive visite a una pagina fanno sì che il browser scarichi ripetutamente le stesse risorse, ogni volta che l’utente richiede la pagina. Dato che queste risorse statiche costituiscono una quantità significativa del payload di un sito WordPress, la memorizzazione nella cache del browser riduce i tempi di caricamento della pagina.
È necessaria la memorizzazione nella cache del browser?
Un controllo del sito web sulla distribuzione delle dimensioni delle risorse del tuo payload rivela generalmente quanto sono grandi le tue risorse e quante richieste un browser deve inviare per scaricarle prima di visualizzare la tua pagina. Se noti che una parte significativa della tua pagina web è costituita da file statici, dovresti valutare la memorizzazione nella cache del browser per migliorare la velocità della pagina.
Un modo più semplice 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 avviare un test dettagliato. I risultati del test ti mostreranno come velocizzare il tuo sito web. Come potrai notare, un avviso comune nella sezione dei risultati è il leverage browser caching.
In alternativa, puoi utilizzare Think with Google, uno strumento di test della velocità delle pagine per valutare il tuo sito web su dispositivi mobile. Una raccomandazione chiave di questo strumento è quella di 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 un criterio di cache efficace per migliorare la velocità della pagina. La memorizzazione nella cache del browser costituisce una parte importante di una politica di cache efficace.
Risolvi l’avviso leverage browser caching in WordPress senza plugin
Se non vuoi utilizzare un plugin, è possibile modificare le impostazioni del server web per risolvere il leverage browser caching. In tal caso, il server web indicherà al browser del visitatore di salvare determinate risorse nella cache del browser. Il browser memorizzerà questi file localmente per un determinato periodo di tempo e li utilizzerà durante le successive visite alla pagina.
Il processo di impostazione del server web per indicare ai browser dei visitatori di avviare la memorizzazione nella cache varia da server a server. In questo post, illustreremo come abilitare la memorizzazione nella cache del browser nei due server web più popolari: Apache e Nginx.
È possibile correggere il leverage browser caching seguendo questi passaggi:
- Aggiunta di Expires Headers: queste intestazioni indicano al browser quando richiedere una nuova versione di una risorsa dal server.
- Modifica headers del controllo della cache: è possibile utilizzare queste intestazioni per impostare i criteri relativi alla cache.
- Impostazione di entity tags headers (ETags): è possibile identificare se una risorsa sul server è cambiata rispetto al file locale.
Correggi il leverage browser caching in Apache
1. Crea o modifica il file .htaccess
Su un server Apache, è possibile impostare tutti i parametri necessari nel file .htaccess . Questo file consente di configurare manualmente le impostazioni di Apache. E’ un file di testo semplice che memorizza i parametri di Apache e imposta autorizzazioni e configurazioni per la directory in cui risiede.
Se inserisci un file .htaccess nella directory principale del tuo sito web, le sue regole verranno applicato 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 hanno la precedenza sulle impostazioni dei file .htaccess nelle directory principali.
Se disponi dell’accesso terminale al server, è possibile 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 utilizzi il file manager di cPanel, spostati nella posizione richiesta e crea un file .htaccess.
Se hai già un file .htaccess, puoi semplicemente aggiungere allo stesso le nuove regole di memorizzazione nella cache del browser.
2. Aggiungi Expires Headers
La prima impostazione nel file .htaccess è abilitare la funzione di expires headers . Aggiungi la seguente riga al file:
ExpiresActive On
Successivamente, puoi impostare il periodo per diversi tipi di file di testo utilizzando la sintassi mostrata di seguito:
ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month"
Per impostare un tempo di scadenza per le immagini, utilizzaimageal posto di textseguito da uno slash e l’estensione dell’immagine.
ExpiresByType image/jpeg "access 1 month" ExpiresByType image/svg "access 1 month"
Per impostare la scadenza per le applicazioni, utilizza applicatione specifica l’estensione del file.
ExpiresByType application/pdf "access 1 month"
Per tutti gli altri file non coperti da alcuna impostazione specifica, utilizza la definizione ExpiresDefault:
ExpiresDefault "access 1 month"
3. Definisci un criterio cache
Successivamente, è necessario definire i criteri della cache utilizzando le impostazioni Controllo cache.
Esistono tre parti principali di un criterio cache:
- come viene memorizzata una risorsa nella cache
- la posizione della memorizzazione nella cache
- il tempo prima che scada la risorsa
Una cache pubblica indica al browser che le risorse possono essere memorizzate nella cache ovunque, mentre una cache privata consente l’archiviazione solo sul dispositivo client.
Ad esempio, la pagina del profilo di un utente che ha effettuato l’accesso deve essere memorizzata nella cache solo sul dispositivo client.
Al contrario, la home page di un blog può essere memorizzata nella cache di una CDN, anche. È possibile impostare un criterio di cache pubblica aggiungendo la seguente regola:
<IfModule mod_headers.c> Header set Cache-Control "public" </IfModule>
Puoi anche specificare criteri diversi per diversi tipi di file aggiungendo i seguenti filtri al modulo header:
<ifModule mod_headers.c> <filesMatch "\.(ico|jpeg|jpg|png)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(php)$"> Header set Cache-Control "private" </filesMatch> </ifModule>
Il codice sopra specifica che il browser può archiviare file di immagine ovunque, ma i file PHP devono essere memorizzati sul dispositivo client.
Puoi anche aggiungere una configurazione Expires a ciascunafilesMatch rule. È necessario definire il tempo di scadenza in secondi. Impostandolo su zero è necessario che il browser richieda il file ogni volta che la pagina viene caricata:
Header set Expires 0
4. Disabilita gli Entity Tags in Apache
Infine, è necessario disabilitare gli Entity Tags utilizzando il seguente codice:
FileETag None
La disabilitazione di ETag impone al browser di fare affidamento sui criteri della cache ed evitare di riconvalidare i file ogni volta che viene caricata una pagina.
Salva il file .htaccess e riavviare Apache per rendere effettive le modifiche.
Risolvere il Leverage Browser Caching 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 usando il codice seguente:
location ~* \.(ico|jpeg|jpg|png)$ {
expires 30d;
}
Puoi anche aggiungere un’intestazione Cache-Control allo stesso blocco di codice:
location ~* \.(ico|jpeg|jpg|png)$ {
expires 30d;
add_header Cache-Control "public";
}
Salva il file di configurazione e riavvia Nginx per rendere effettive le modifiche.
Risolvere il Leverage Browser Cache con un plugin
Se stai utilizzando un plugin di caching per WordPress, potrebbe già avere il supporto per la memorizzazione nella cache del browser.
Vediamo ora come risolvere il leverage browser caching con alcuni dei plugin di cache più conosciuti.
1. WP Rocket
WP Rocket è uno dei plugin più rapidi e consigliati per WordPress in grado di gestire tutte le ottimizzazioni della velocità con pochi clic. WP Rocket non solo ti consente risolvere il leverage browser caching, ma ti permette di ottimizzare il tuo sito utilizzando varie tecniche come:
- compressione di file statici (GZip) – per ridurre le dimensioni totali dei dati (leggi il post completo su come abilitare la compressione GZip in WordPress )
- abilitare la cache di file (incluso il precaricamento della cache) – per sollecitare meno il server (e recuperare una copia pre-acquisita di ogni pagina)
- Ottimizzazione dei Font Google – per assicurarsi che i caratteri più pesanti vengano caricati rapidamente,
- Lazy loading – in modo tale che le immagini vengano caricate solo quando l’utente scorre verso il basso fino alla sezione di una pagina in cui è richiesta l’immagine
- Minificazione e combinazione – riduzione delle dimensioni e combinazione delle risorse di testo per consegnarle più rapidamente all’utente finale
- Rinviare il caricamento di JS – in modo tale che la pagina venga visualizzata rapidamente invece di attendere il download di tutte le risorse..
- Integrare e abilitare una rete CDN – in modo tale che le immagini più pesanti vengano consegnate più rapidamente
- Prefetching DNS – per ridurre il tempo necessario per risolvere l’origine del contenuto di terze parti
Tutto questo potrebbe sembrare incomprensibile per chi non sia direttamente coinvolto nelle ottimizzazioni di un sito web, ma in realtà, queste sono tutte misure che dovrai prendere se vuoi velocizzare WordPress .
Consigliamo vivamente di leggere la nostra recensione di WP Rocket,
2. LiteSpeed Cache
LiteSpeed Cache è un plugin di caching che ti consente di risolvere il leverage browser caching semplicemente abilitando la funzione. Installa e attiva il plugin e vai alle impostazioni della cache. Passa alla scheda Browser e abilita l’opzione Cache del browser .
È’ possibile inoltre impostare il tempo di scadenza. Nota comunque che questa impostazione si applica a tutti i file memorizzati nella cache sul sito web.
3. WP Fastest Cache
WP Fastest Cache è un altro plugin di cache per 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. W3 Total Cache
W3 Total Cache è un altro plugin di cache del browser molto utilizzato. Ti consente di personalizzare un’ampia gamma di opzioni di memorizzazione nella cache. Una volta installato, vai alla sezione Browser cache nella pagina delle impostazioni.
Questo plugin consente di impostare autorizzazioni per una serie di categorie di file come immagini, script e fogli di stile. Per ogni categoria, è possibile impostare Expires headers, Expires lifetimes, e ETags.
Conclusione
In questo post, abbiamo esplorato l’importanza della velocità della pagina e perché dovresti risolvere il leverage browser caching in WordPress.
Abbiamo visto gli strumenti di test della velocità che indicano se il tuo sito WordPress necessita di memorizzazione nella cache del browser. Successivamente, abbiamo discusso su come configurare i vari web server per abilitare la memorizzazione nella cache del browser senza utilizzare un plugin. Infine, abbiamo esaminato tre plugin popolari che ti consentono di correggere il leverage browser caching in WordPress.
Buon lavoro!
