Sito lento e stai cercando di migliorarlo? Probabilmente hai visto questo avviso ma non sei sicuro di cosa significhi o come risolverlo ... ma ti abbiamo coperto. Sfruttare il caching del browser è un modo per rendere il tuo sito web più veloce, ma istruire il browser a memorizzare o "memorizzare nella cache" i file per un po 'di tempo, in modo che non debbano essere scaricati di nuovo in una visita successiva. Questo è tutto ciò che significa in breve.
Ma resta e leggi tutto su come assicurarti di rendere il tuo sito web più veloce correggendo questo errore o avviso.
In sostanza, se vuoi sfruttare la memorizzazione nella cache del browser, devi specificare per quanto tempo i browser web devono conservare le immagini, i file CSS e Javascript archiviati localmente, sul browser client. Utilizzando queste specifiche e impostazioni, il browser dell'utente utilizzerà meno dati durante la navigazione nelle pagine del tuo sito web (perché deve scaricare meno file). Sfruttare la memorizzazione nella cache del browser WordPress significa un miglioramento nella velocità di caricamento del tuo sito web.
Se hai poco tempo, questo è il modo più semplice per sfruttare il caching del browser WordPress:
Come risolvere l'avviso di WordPress Sfrutta la cache del browser
- Scarica il plugin che puoi trovare qui
- Vai alla dashboard del tuo WordPress, quindi visita: Dashboard> Plugin> Aggiungi nuovo
- Cerca "Sfrutta la cache del browser" o fai clic su Carica plug-in e scegli il file scaricato e fai clic su Installa ora
- Attiva il plugin
- Testa di nuovo il tuo sito web per confermare che le nuove impostazioni funzionino correttamente e che l'avviso sia scomparso
Implementando queste modifiche minime, vedrai che il tuo punteggio su siti come GTMetrix, Pingdom Tools o Pagespeed Insights aumenterà in modo significativo.
In effetti, questo è uno dei modi più semplici per rendere più veloce il tuo sito Web WordPress.
Comporta uno sforzo minimo da parte tua ed è uno dei compiti ad alta priorità consigliati da Google per velocizzare il caricamento del tuo sito web. È anche consigliato da siti come GTMetrix o Google Pagespeed Insights per velocizzare il caricamento.
Che cos'è la cache del browser?
Puoi sfruttare la memorizzazione nella cache del browser attraverso il processo di impostazione di una data di scadenza lunga sul contenuto statico del tuo sito web. Ciò consente ai browser di "sfruttare" la memorizzazione nella cache e riutilizzare questi file più e più volte, senza doverli scaricare. Memorizzando questi file nella cache non è necessario scaricarli di nuovo, quindi il tuo sito web è più veloce da caricare.
Prima di mostrarti effettivamente come implementarlo, discuteremo prima di cosa significa sfruttare il caching del browser in WordPress e come funziona!
Una volta spiegato come funziona, puoi capire come aiuta velocizza il caricamento delle tue pagine.
In sostanza, quando qualcuno visita una pagina, il browser deve scaricare dal server tutte le risorse del server su quel dominio. Questi includono HTML, file CSS, JS, testo, immagini e qualsiasi altra risorsa) per caricare e visualizzare la pagina corrente.
Ora, invece di scaricare effettivamente tutto più e più volte ogni volta che visiti una pagina diversa sullo stesso sito, il browser utilizza quella che viene chiamata Web Cache. Questa è una funzione utilizzata dai browser per "memorizzare temporaneamente" o "memorizzare nella cache" le risorse della pagina Web nella memoria locale del dispositivo. Questa memoria o dati si chiama ' Cache Web' o 'Cache HTTP'.
Dai un'occhiata a questo divertente diagramma che spiega come funziona il web caching:
Possiamo vedere sopra, che la prima volta che il dispositivo dell'utente (a sinistra) chiede al server (a destra) il file di immagini / logo, la richiesta viene intercettata dal meccanismo di web caching (che controlla se ha una copia di quel file). In caso contrario, lo recupera dal server. Alla visita successiva, invece di andare al server, lo riceve dalla propria copia.
Quindi, il bello di questa funzione è che quando un utente visita di nuovo lo stesso sito o una pagina diversa sullo stesso dominio, il browser utilizzerà la copia che attualmente risiede nella cache temporanea, anziché dover scaricare tutte le risorse di nuovo. Il browser scaricherà solo tutto ciò che è diverso.
Poiché molti siti Web avranno solo modifiche minime da una pagina all'altra e tra le visite, il riutilizzo della copia memorizzata nella cache ha consentito alla pagina di caricarsi molto più velocemente.
Questo aiuta anche a ridurre il consumo di larghezza di banda dal tuo server web e riduce anche il carico sul server. Potresti anche aver ricevuto un avviso durante l'ottimizzazione della velocità delle tue pagine.
Avviso di velocità della pagina per sfruttare la memorizzazione nella cache del browser
Siti come GTMetrix o Pagespeed Insights possono mostrare quanto segue sfruttare la cache del browser avviso, che dovrai correggere se non hai attivato le impostazioni di seguito.
ma questo era in realtà l'avvertimento mostrato in una versione precedente di Pagespeed Insights. L'avviso più recente assomiglia un po 'a questo:
Fornisci risorse statiche con un'efficiente politica della cache
Ora, cosa significa questo in realtà?
Sebbene la funzione sopra descritta sia ottima in teoria, per impostazione predefinita la maggior parte dei siti Web "contrassegnerà" il contenuto come scaduto dopo 8 giorni o un breve periodo di tempo. Ciò significa che se un utente visita nuovamente il tuo dominio dopo 1 settimana, dovrà scaricare nuovamente le risorse.
Quando impostiamo un metodo per sfruttare il caching del browser, ciò che effettivamente facciamo è istruire il browser ad estendere la durata o la data di scadenza delle risorse che vengono scaricate dai nostri visitatori e di conseguenza ottimizzare le prestazioni.
Estendendo la durata della cache (o quanto tempo impiega un file a diventare vecchio), ti assicuri che i tuoi visitatori non debbano aspettare per scaricare le stesse cose ogni volta che visitano il tuo sito.
Ciò comporta pochissime modifiche e non è molto complicato da implementare - e troverai la sintassi esatta di seguito.
Ciò che la modifica fa effettivamente è impostare le date di scadenza del contenuto aggiungendo Intestazioni di controllo della cache esterni Intestazioni ETag nelle intestazioni HTTP. L'intestazione Cache-Control dichiara il periodo di memorizzazione nella cache di un particolare file o tipo di file. L'ETag viene quindi utilizzato per verificare eventuali modifiche esistenti (o meno) tra le risorse memorizzate nella cache e quelle richieste.
L'impostazione in genere consente di specificare il periodo in giorni, mesi o anni per archiviare localmente i file di memorizzazione nella cache. Naturalmente, se prevedi di cambiare le risorse ogni tanto, è consigliabile impostare le date di scadenza con una frequenza che corrisponda all'incirca al periodo in cui prevedi di cambiarle.
Per inciso, se stai cercando di rendere veloce il tuo WordPress, ci sono alcuni plugin come questo che può fare una vera differenza in termini di prestazioni in pochi minuti (con uno sforzo minimo o nullo).
Non sei pronto per utilizzare un plug-in per ora? Continuare a leggere...
Se sei interessato a rendere il tuo sito web più veloce, ti consigliamo vivamente di visitare il nostro articolo: [25 azioni] Velocizza WordPress: ottieni un sito web super veloce oggi - una guida completa.
1. Utilizzo del file .htaccess
Ecco le istruzioni esatte che devi eseguire:
- Accedi al CPanel del tuo account di hosting
- Vai alla cartella principale del sito web
- Apri il file .htaccess con il tuo Editor di file. Se non trovi il file, controlla se riesci a visualizzare i file nascosti (il file .htaccess è nascosto per impostazione predefinita)
- Aggiungi le seguenti modifiche alla fine del file
- Aggiungi Expire Headers con tempi di scadenza lunghi
- Aggiungi intestazioni di controllo della cache
- Annulla impostazione intestazioni ETag
- Non apportare altre modifiche
- Salva il file
- Riesegui il test
Per impostare il tempo di scadenza di risorse come immagini e file CSS è necessaria una leggera modifica al file .htaccess. Si trova nella radice del tuo server di hosting. È possibile modificare i valori delle intestazioni di scadenza per migliorare le prestazioni.
Imposta questi valori fintanto che ha senso per il tuo sito: in genere 1 mese è abbastanza buono.
#La personalizzazione scade l'inizio della memorizzazione nella cache: regola il periodo in base alle tue esigenze 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 "accesso 600 secondi" ExpiresByType text / css "accesso 1 mese" ExpiresByType text / javascript "accesso 1 mese" ExpiresByType text / x-javascript "accesso 1 mese" ExpiresByType application / javascript "accesso 1 mese" ExpiresByType applicazione / x-javascript "accesso 1 mese" ExpiresByType application / x-shockwave-flash "accesso 1 mese" ExpiresByType application / pdf "accesso 1 mese" ExpiresByType image / x-icon "accesso 1 anno" ExpiresByType image / jpg "accesso 1 anno "ExpiresByType image / jpeg" accesso 1 anno "ExpiresByType image / png" accesso 1 anno "ExpiresByType image / gif" accesso 1 anno "ExpiresDefault" accesso 1 mese "
# Scade la fine della memorizzazione nella cache
Pensi di non essere a tuo agio nel fare questi cambiamenti da solo?
Se non sei sicuro di fare un tale cambiamento, puoi scegliere di farlo tramite un concerto economico su Fiverr.
Trova i migliori concerti per l'ottimizzazione della velocità del sito Web su Fiverr
Con le modifiche precedenti, stiamo impostando gli asset che si aggiornano rapidamente, come l'HTML della tua pagina, in modo che scadano dopo 600 secondi (questo perché l'HTML in genere cambia più frequentemente). Stiamo anche cambiando cose come CSS e Javascript in modo che scadano solo una volta al mese (tali file cambiano solo se apporti modifiche al tuo modello o plugin).
Ciò significa che se il tuo visitatore visita di nuovo la pagina entro un mese, non deve scaricare di nuovo le risorse CSS e JS. Se sai che raramente esegui questi tipi di modifiche sul tuo sito, puoi impostare il valore più alto, a 1 anno, simile all'intestazione jpeg, png scade.
Questo è il modo più efficace per sfruttare la cache del browser per WordPress o altri siti Web che utilizzano un file .htaccess.
Imposta i file immagine su una scadenza lunga
Come puoi anche vedere nel nostro esempio sopra, le nostre immagini scadono solo una volta all'anno. A volte potrebbe essere troppo lungo, quindi anche un mese è generalmente abbastanza buono. Uno ha bisogno di capire cosa ha senso per il tuo sito web.
Ciò garantisce che i media più grandi che richiedono più tempo per il download siano conservati sul computer dei visitatori e non dovranno essere scaricati di nuovo fino al prossimo anno. A causa di questa modifica nel tuo file .htaccess, stai utilizzando correttamente il caching del browser in WordPress: le immagini non vengono scaricate di nuovo per un anno intero.
Ciò rende l'esperienza di un cliente di ritorno molto più positiva, perché ci vuole meno tempo per caricare ogni pagina. I file che sono memorizzati nella cache vengono ora riutilizzati.
Dopo aver impostato le date di scadenza, è importante impostare anche le intestazioni Cache-Control corrette in modo tale che l'impostazione di cui sopra funzioni effettivamente correttamente. Questa è un'altra impostazione nel file .htaccess, che puoi trovare di seguito.
Aggiungi intestazioni di controllo della cache
La seguente impostazione dovrebbe anche essere aggiunta al file per impostare le intestazioni di controllo della cache come discusso sopra.
# BEGIN Intestazioni controllo cache
Accodamento intestazione Cache-Control "public" Accodamento intestazione Cache-Control "public" Accodamento intestazione Cache-Control "privato" Accodamento intestazione Cache-Control "private, must-revalidate"
Abbiamo già impostato le date di scadenza, quindi non dobbiamo impostarle di nuovo qui.
Annulla l'impostazione delle intestazioni ETag per siti multi-server o CDN
L'ultima cosa che dobbiamo fare è (dis) impostare l'impostazione Etags.
In sostanza, questo è solo importante se stai usando un CDN per servire alcune delle tue risorse. Gli Etag sono intestazioni che vengono tipicamente costruiti utilizzando attributi che li rendono unici per ogni specifica macchina che ospita un sito (motivo tecnico - utilizza un MD5 generato dal server, rendendolo unico per il server che lo genera).
Se un sito Web utilizza una CDN o più server per servire le proprie pagine, NON vi è alcuna garanzia che verrà utilizzato lo stesso server, pertanto i tag non corrisponderanno quando un browser ottiene il componente originale da un server e successivamente tenta di convalidare quel componente su un server diverso.
Per questo motivo, sarebbe meglio DISATTIVARLI se utilizzi più server o una CDN per ospitare il tuo sito web. Ciò consente alle intestazioni di controllo della cache di controllare effettivamente la memorizzazione nella cache anziché gli ETag. Dato che abbiamo inserito le impostazioni per controllare la memorizzazione nella cache tramite le intestazioni Cache-Control, gli ETag non sono più necessari, quindi li disattiveremo.
Aggiungilo al tuo file .htaccess per annullarne l'impostazione.
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None
Se hai bisogno di leggere di più su cosa fanno gli Etag, puoi trovare maggiori dettagli e leggere su di loro in questo articolo: https://en.wikipedia.org/wiki/HTTP_ETag
2. Utilizzo di plugin
Modificare e giocare con il file .htaccess può effettivamente danneggiare il tuo sito. Se commetti un piccolo errore, il tuo server web non sarà in grado di analizzarlo, inizierà a lanciare pagine biancheoppure genera l'errore 500 e il sito sarà morto!
Quindi, se sei contrario a farlo, puoi installare un semplice plugin che si occupi di gestire tutto questo.
Naturalmente, ci sono molti altri plugin che sono in grado di farlo. La maggior parte dei plugin che hanno lo scopo di rendere le tue pagine più veloci eseguiranno la maggior parte di queste impostazioni in background.
In sostanza, oltre a gestire tutte le impostazioni per sfruttare il caching del browser WordPress, questi saranno in grado di eseguire una serie di altre ottimizzazioni di caching, come la creazione di copie temporanee (caching dei file), ottimizzazioni del database, Memcache e altre ottimizzazioni che rendono il tuo sito complessivamente più veloce .
Questi includerebbero plugin come WP Rocket, WP veloce Cachee W3 Total Cache e plug-in di memorizzazione nella cache premium.
Vediamo alcuni di questi plugin.
Plugin di Rinku Yadav
Questo è il più semplice di tutti, non fa altro che aggiustare il caching del browser in WordPress.
- Scarica il plugin che puoi trovare qui.
- Vai alla dashboard del tuo WordPress, quindi visita: Dashboard> Plugin> Aggiungi nuovo.
- Cerca "Sfrutta la cache del browser" o fai clic su Carica plug-in e cerca il file appena scaricato.
- Fare clic su Installa ora.
- Attiva il plugin e il gioco è fatto!
- Ora dovresti testare di nuovo il tuo sito web per confermare che le nuove impostazioni funzionano correttamente e l'avviso è scomparso.
Se stai cercando un prodotto che faccia molto di più per rendere il tuo sito più veloce, ti consigliamo vivamente di guardare il resto dei plugin che menzioniamo di seguito.
WP Rocket
Questo è uno dei plugin più veloci e consigliati per WordPress in grado di gestire tutte le ottimizzazioni della velocità con pochi clic. In sostanza, questo esegue ottimizzazioni della velocità come
- compressione di file statici (GZip) - per ridurre la dimensione totale dei dati da fornire (abbiamo un tutorial completo su come abilitare la compressione GZip in WordPress qui)
- consente a cache dei file (incluso il precaricamento della cache) - per ridurre lo stress sul server (recupero di una copia pre-renderizzata di ogni pagina)
- Ottimizzazione di Google Fonts - per assicurarsi che i caratteri più pesanti vengano caricati rapidamente),
- caricamento lento - 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 - ridurre le dimensioni e combinare le risorse di testo per distribuirle più rapidamente all'utente finale
- Posticipa il caricamento di JS - in modo tale che la pagina venga visualizzata rapidamente invece di attendere il download di tutte le risorse. Questo è qualcosa di cui abbiamo parlato CollectiveRay.
- Integra e abilita una CDN - in modo tale che i tuoi supporti più pesanti vengano consegnati più velocemente
- Prefetching DNS - per ridurre il tempo necessario per risolvere la fonte del contenuto di terze parti
Tutto quanto sopra potrebbe sembrare incomprensibile a chiunque non sia coinvolto nell'ottimizzazione delle infrastrutture, ma in realtà si tratta di tutte le cose che devi fare per velocizzare il caricamento del tuo sito web.
La cosa grandiosa è che con WP Rocket non devi fare il sollevamento pesante e la configurazione: è tutto fatto per te! Ti consigliamo vivamente di provare questo plugin, che è stato valutato come il modo migliore per rendere più veloce il tuo sito web.
W3 Total Cache
Questo è uno dei maggior parte plugin di caching popolari mai. È in circolazione da un bel po 'di tempo e ha avuto molto tempo per maturare molto bene per incorporare la maggior parte delle funzionalità che ci si aspetterebbe da un plug-in di memorizzazione nella cache.
Il problema è questo. Io, qualcuno che ha lavorato a WordPress e al web design da molto tempo, ed è un'esperienza così frustrante lavorarci. Il plug-in non è semplice da configurare e devi davvero capirlo e conoscerlo bene per poterlo installare e funzionare correttamente.
Se stai cercando un buon modo per sfruttare la cache di navigazione in WordPress utilizzando un plug-in, consigliamo vivamente WPRocket sopra invece di W3Total Cache.
3. Sfrutta la cache del browser in Nginx
Se il tuo sito web utilizza effettivamente Nginx come server, avrai bisogno di un codice diverso, perché Nginx non ha un file .htaccess. Tuttavia, è ancora relativamente facile implementarlo, perché devi solo eseguire alcune modifiche nel file conf del server.
È necessario aggiungere il codice sottostante all'interno di un blocco di server esistente nel file di configurazione. Questo sarà in genere in /etc/nginx/sites-enabled/default
server {ascolta 80; nome_server localhost; posizione / {root / usr / share / nginx / html; index index.html index.htm; } posizione ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {scade 365d; } posizione ~ * \. (pdf) $ {scade 30 gg; }}
Aggiungi le intestazioni di controllo della cache per Nginx
posizione ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ {scade 90d; add_header Cache-Control "public, no-transform"; }
Come puoi dedurre dal codice sopra, stiamo impostando il luogo di scadenza per i file di immagine a 1 anno o 365 giorni, mentre stiamo impostando la scadenza dei PDF dopo 30 giorni. È possibile aggiungere più estensioni di file per personalizzare la scadenza rendendola diversa per altri tipi di file.
Tutti i tipi di file aggiunti verranno memorizzati nella cache di conseguenza.
4. Come memorizzare nella cache risorse di terze parti
Sebbene sia abbastanza facile applicare l'impostazione di cui sopra, scoprirai che anche dopo aver eseguito le modifiche di cui sopra, continuerai comunque a ricevere questo messaggio negli strumenti di test della velocità del sito Web e in Google Pagespeed Insights.
Questo perché la maggior parte degli script e dei servizi di terze parti non specifica un tempo di scadenza lungo, per vari motivi diversi.
Non hai alcun controllo su questi script, sfortunatamente, quindi ti consigliamo vivamente di utilizzare il MINIMO script di terze parti possibile. Se puoi vivere senza lo script, eliminalo dal tuo sito web. Scegliendo di includerlo, trascinerà il tempo di caricamento delle tue pagine verso il basso.
5. Specificare un Cache Validator
Questo è un altro avviso mostrato frequentemente da GTMetrix, in genere proveniente da script di terze parti. Essenzialmente, questo è lo stesso problema che abbiamo appena descritto nella sezione precedente, in cui alcuni script non specificano né un'intestazione ETag né un'intestazione Last-Modified come descritto.
Sfortunatamente, non c'è molto che puoi fare per risolvere questo problema, se questi errori specifici provengono da domini che sono al di fuori del tuo controllo come Facebook o, nel caso dell'immagine sottostante, Sumo, quindi non c'è nulla che puoi risolvere .
La tua unica soluzione, in questo caso, sarebbe rimuovere completamente questi script dal tuo dominio se vuoi essere sicuro che questo avviso non venga visualizzato.
Domande frequenti
Come risolvete l'utilizzo della cache del browser?
Il modo più semplice per sfruttare la memorizzazione nella cache del browser è installare un plug-in che consente di specificare la durata della memorizzazione nella cache di diversi tipi di contenuto statico. Un metodo alternativo ma semplice è specificare il tempo di memorizzazione nella cache nel file .htaccess del tuo sito web. Abbiamo istruzioni dettagliate su come farlo qui.
Come si abilita la cache in WordPress?
Per abilitare la cache in WordPress, puoi semplicemente installare un plug-in che abilita diversi livelli di cache, tra cui una cache a livello di server, una cache a livello di pagina e una cache a livello di browser. Il nostro plug-in consigliato per questo è WP-Rocket, ma ci sono diverse scelte alternative che menzioniamo in questo articolo che renderanno anche il caricamento del tuo sito web più veloce.
Come posso sfruttare la cache del browser per script di terze parti?
Non è possibile modificare il valore di memorizzazione nella cache del browser per script di terze parti come Facebook o Google Analytics perché questi sono impostati a livello di server e non si ha alcun controllo su di essi. La tua migliore opzione, in questo caso, è usare il minor numero possibile di questi script
Conclusione
Sopra ti abbiamo mostrato un sacco di modi per implementare per assicurarti di essere in grado di sfruttare la cache del browser e assicurarti che il contenuto scaricato venga riutilizzato più e più volte. Assicurati di averlo implementato sul tuo sito, per evitare che l'errore venga visualizzato sugli strumenti che analizzano le metriche di velocità del tuo sito.
Se ritieni che questo vada un po 'oltre le tue capacità, ti consigliamo di lasciare questa roba nelle mani dei PRO e di installare un plugin come WP Rocket per assicurarti di ottenere i massimi benefici da questo e molte altre azioni per rendere il tuo caricamento del sito web più veloce.
Visita WP Rocket per rendere il tuo sito web più veloce oggi
Per favore, lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!
Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.