Come sfruttare il caching del browser in WordPress (con o senza) Plugin

Stai cercando una soluzione efficace per sfruttare il caching del browser in WordPress ? Bene vediamo di venirti incontro, per prima cosa devi conoscere la velocità di caricamento del tuo sito web per comprendere dove meglio agire. Strumenti come Google PageSpeed ​​Insights, GTmatrix o Pingdom probabilmente ti hanno suggerito di sfruttare il caching del browser. Questo si può ottenere tramite il File htaccess o tramite un apposito Leverage Browser Caching Plugin WordPress.

Hai già letto da qualche parte che sfruttare il caching del browser tramite Htaccess può aiutarti ad aumentare la velocità del tuo sito?

Si No? Non sono sicuro?

Secondo la nostra esperienza, il caching del browser può aiutarti ad aumentare la velocità di caricamento del tuo sito web fino al 50% . Stai pensando a come potrebbe essere possibile? Continua la lettura, ti spiegheremo tutto.

Cosa è caching del browser?

Sfruttare il caching del browser significa, per quanto tempo, un browser deve memorizzare localmente le risorse memorizzabili nella cache (ad esempio immagini, JavaScript e CSS) di un sito Web. Quindi, quel browser ha solo bisogno di scaricare risorse aggiornate durante la navigazione nello stesso sito web. Pertanto, migliora la velocità di caricamento del sito.

browser caching

Sfrutta il caching del browser per le seguenti risorse memorizzabili in cache

Mentre esegui un test su Test my site with Google, puoi spesso notare un consiglio per sfruttare il caching del browser per le seguenti risorse memorizzabili nella cache di WordPress. Nella maggior parte dei casi, le risorse memorizzabili nella cache sono i file del sito Web (come immagini, JavaScript e CSS) che possono essere temporaneamente memorizzati dal browser.

Come sfruttare il caching del browser può velocizzare il tuo sito

Prima di entrare nei dettagli, comprendiamo come funziona Leek Browser Caching in WordPress e come aiuta a caricare le tue pagine web più velocemente.

Un browser Web deve recuperare molte risorse dal server (ad esempio file HTML, file CSS, file JS, testo, immagini ecc.) Per caricare un sito Web.

Web Cache è la tecnologia utilizzata nei browser Web e nelle applicazioni software per “memorizzare temporaneamente” o “ricordare” le risorse di pagine Web visitate sul disco locale. Questo dato temporaneamente memorizzato si chiama Web Cache o HTTP Cache.

Quando visiterai di nuovo lo stesso sito, il browser Web scarica solo il contenuto aggiornato dal sito Web e lo combina con i dati “temporaneamente archiviati” dello stesso sito Web.

Grazie a questo, la cache Web aiuta a ridurre gli utilizzi della larghezza di banda, i carichi del server ecc. Pertanto, sfruttare il caching del browser è diventato importante per caricare le pagine Web più velocemente.

In altre parole, comanda al browser Web di memorizzare i file del sito Web localmente per un periodo di tempo impostato e carica il file dall’archivio locale per le visite successive fino al suddetto periodo. Di conseguenza, il caricamento dei file del sito Web dalla memoria locale aiuta il browser Web a rendere e visualizzare il sito Web più rapidamente.

Ho sfruttato la cache del browser sul mio sito web?

Assolutamente si! Come puoi notare dal test effettuato sul nostro sito cliccando QUI

Ok, prima di tutto, lasciami condividere la mia esperienza con te e poi puoi decidere.

Ho implementato caching del browser su altri siti web e da allora ho ottenuto risultati sorprendenti in termini di velocità di caricamento. Di conseguenza, il punteggio di PageSpeed ​​del mio sito web è di quasi 100.

(Ho ottenuto questo punteggio non solo a causa dell’implementazione di caching del browser sul mio sito web, ma ci sono anche molti altri fattori che si applicano.)

Puoi implementarlo facilmente. Aggiungi un semplice pezzo di codice nel tuo file htaccess e hai finito. Grazie a ciò, sfruttare il caching del browser tramite Htaccess in WordPress è uno dei modi migliori e più facili da raccomandare.

Tuttavia, se non vuoi non vuoi modificare il file htaccess del tuo sito web, va bene. Esistono diversi plugin gratuiti per WordPress che sfruttano il caching del browser che sono disponibili nel repository WP, ecco alcuni tra i più noti e usati

Abilita il caching del browser in WordPress

  • Aggiunta di intestazioni di scadenze
  • Aggiunta di intestazioni di controllo della cache
  • Disattivazione di ETags

Discutiamo in dettaglio come aggiungere Expires Headers e Cache-Control Headers e per disattivare gli ETags.

Sfrutta il caching del browser tramite htaccess su Server Apache (senza plugin WordPress)
Se il tuo sito web è ospitato su un Server Apache, puoi modificare il tuo file .htaccess di WordPress.

Quindi, copia e incolla il codice seguente nel file htaccess e salva. (Ricorda, ogni volta che si agisce direttamente su un file e buona regola munirsi di un backup del sito e del file che si ba a modificare)

Aggiungi Expires Headers (Apache)


# INIZIO SCADENZA CACHING
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# FINE SCADDENZA CACHING

Di solito si impostano le date di scadenza a un anno. Meno di un mese o oltre un anno non è raccomandato.

Inoltre, è necessario aggiungere le intestazioni di Cache-Control sotto il codice Expires Headers nel file htaccess.

Aggiungi intestazioni di controllo della cache (Apache)


# INIZIO Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# FINE Cache-Control Headers

È possibile specificare la linea temporale in Intestazioni di controllo della cache, ma non sarà necessario poiché sono già state impostate le date di scadenza per le risorse memorizzate nella cache.

Infine, è necessario disattivare gli ETags . Puoi leggere di più su ETags qui .

Disattiva ETags (Apache)


# INIZIO Turn ETags Off
FileETag None
# FINE Turn ETags Off

Sfrutta il caching del browser sul server NGINX (senza plug-in di WordPress)

Se si utilizza il server Nginx, è possibile sfruttare il caching del browser Web modificando e aggiungendo il seguente codice nel file .conf.

Copia e incolla questo codice seguente.

Puoi trovare il tuo file di configurazione in questa posizione … /etc/nginx/sites-enabled/default

Aggiungi estensioni intestazioni (NGINX)


location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 365d;
}
location ~* \.(pdf|html|swf)$ {
expires 90d;
}

Aggiungi intestazioni di controllo della cache (NGINX)

location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|svg)$ {
expires 90d;
add_header Cache-Control "public, no-transform";
}

Se si dispone di più siti Web su NGINX Server. Vi consiglio di creare un file xyz.conf e aggiungere il codice sopra menzionato. Salva questo file in questa cartella /etc/nginx/sites-available/xyz.conf

Ricarica il server Nginx dopo la modifica. Congratulazioni, hai attivato con successo il cache del browser su server NGINX.

Spero che vi sia stato utile