Memorizzazione nella cache del browser WordPress

Velocizza drasticamente il tuo sito Web WordPress con l'uso della memorizzazione nella cache del browser, nota anche come cache con scadenza .

Molti provider di test e ottimizzazione della velocità si riferiranno a questo come " Browser Cache ", " Leverage Browser Caching ", " Expires Headers ", " Cache Headers ", " Cache-Control " e " Web Cache ". Come indicato da Google PageSpeed ​​Insights, GTMetrix e MaxCDN seguono questa guida per configurarlo correttamente.

Che cos'è la memorizzazione nella cache del browser?

La memorizzazione nella cache del browser è il metodo del tuo server web che dice al browser di memorizzare una pagina o risorse specifiche per un certo periodo di tempo in modo che non debbano essere scaricate dal server ogni volta che vengono caricate le pagine. Questo può memorizzare nella cache un'intera pagina e/o risorse come JavaScript, CSS, immagini (jpeg, png, gif, ecc.) e molto altro.

Il tuo sito Web WordPress verrà caricato normalmente per ogni utente la prima volta, ma in seguito sarà notevolmente più veloce mentre navigano tra le pagine ed eseguono azioni. Le risorse vengono memorizzate nel browser e di conseguenza vengono caricate localmente invece di essere scaricate nuovamente.

L'importanza della memorizzazione nella cache del browser

In definitiva, lo scopo e l'importanza della memorizzazione nella cache del browser è velocizzare il tuo sito Web WordPress per i tuoi utenti in modo che abbiano un'esperienza più piacevole. Ciò potrebbe portare a un aumento del traffico, a migliori classifiche di ricerca e persino a tassi di conversione migliori su ciò che stai cercando di ottenere.

Come ulteriore effetto bonus, il carico viene tolto dal tuo server web non scaricando risorse su ogni caricamento di pagina per lo stesso visitatore e risparmia anche larghezza di banda sul tuo server web.

La cache Web fornisce velocità reciproca al server e all'utente

Implementazione della cache del browser

L'impostazione della memorizzazione nella cache del browser sul tuo sito Web WordPress è in realtà molto semplice e veloce, ma la configurazione potrebbe differire in base alla configurazione e al server Web che stai utilizzando. Per impostazione predefinita, la configurazione più comune è WordPress in esecuzione su un server Web Apache, ma sono disponibili altri server Web popolari come Nginx, IIS, ecc.

L'utilizzo di un plug-in di memorizzazione nella cache del browser per WordPress semplifica l'implementazione.

Per renderlo ancora più semplice, sono disponibili diversi plug-in di memorizzazione nella cache del browser con leva di WordPress. Abbiamo utilizzato, testato e consigliato il plugin WordPress Leverage Browser Caching Ninjas. È un plug-in di installazione e attivazione che fa il resto per te, semplice come quello.

cache del browser Apache

Apache utilizza un file .htaccess per la memorizzazione nella cache del browser. Dovrebbe esserci un file .htaccess nella radice della tua installazione di WordPress e se non ce n'è uno, puoi crearne uno e inserire le seguenti righe di codice, in cima:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx sfrutta la memorizzazione nella cache del browser

Se stai eseguendo un server Nginx (En-gine-ex), la configurazione è diversa da quella di Apache sopra. Ti consigliamo di aggiungere il seguente codice al tuo file di configurazione vhost, solitamente situato in /etc/nginx/sites-enabled/default . Aggiungi quanto segue al tuo blocco server:

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

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

Il modulo mod_expire viene utilizzato da Lighttpd per controllare le intestazioni che forniscono la memorizzazione nella cache del contenuto dal browser. Questo può entrare di conseguenza nella configurazione del core di Lighttpd.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Microsoft IIS sfrutta la memorizzazione nella cache del browser

La configurazione della cache del browser per IIS (Internet Information Services) è molto semplice.

Selezionalo nell'interfaccia Administration Tools e visualizza le sue proprietà. Dopo aver selezionato la scheda HTTP Headers , dovresti vedere due aree interessanti; Enable Content Expiration e Custom HTTP headers . Il primo dovrebbe essere autoesplicativo e il secondo può essere usato per applicare le intestazioni di Cache-Control.

Tecniche di memorizzazione nella cache del browser

L'utilizzo della memorizzazione nella cache del browser viene ottenuto dal server Web inviando le intestazioni HTTP al browser prima dell'invio dell'HTML. Dicono al browser alcune cose sul contenuto HTML che sta per seguire, come il tipo di contenuto, la data corrente, i dettagli del server, il controllo della cache e la scadenza, ecc.

Le intestazioni Cache-Control , Expires ed Etag sono quelle che danno istruzioni alla cache del browser. Queste intestazioni vengono create automaticamente con i metodi sopra menzionati per sfruttare la memorizzazione nella cache del browser in Apache, Nginx e IIS di conseguenza, quindi non è necessario entrare nei dettagli a meno che non si sia interessati.

Intestazione di controllo della cache

Cache-Control fornisce al browser determinate istruzioni come per quanto tempo il contenuto è considerato "fresco", stato pubblico/privato di memorizzazione nella cache, convalida e altro.

Cache-Control: max-age=3600, pubblico

(https://gist.github.com/tribulant/6309926734d3c127064c)

Scade l'intestazione

L'intestazione Expires fornisce una data HTTP solo fino a quando la risorsa dovrebbe e può essere memorizzata nella cache fino a.

Scade: Sat, 28 Nov 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Intestazione tag

Etag è stato introdotto in HTTP 1.1 come metodo di validazione con un token inviato dal server e utilizzato dal browser per verificare se la rappresentazione del contenuto è cambiata. Fino a Etag , i browser utilizzavano principalmente l'intestazione Last-Modified , ma Etag è più rilevante. La maggior parte dei server Web genererà comunque intestazioni Last-Modified ed Etag .

Etag: “pub1259380237;gz”

(https://gist.github.com/tribulant/2b542d76410bc047be00)

La linea di fondo della memorizzazione nella cache del browser

La memorizzazione nella cache del browser è reciprocamente vantaggiosa sia per te (il tuo server web) che per i tuoi utenti fornendo velocità e prestazioni a entrambe le parti.

Con la memorizzazione nella cache del browser, sii forte e aggressivo, il tuo server web è abbastanza intelligente da sapere quando le risorse sono cambiate per generare intestazioni aggiornate per consentire agli utenti di ottenere nuovi contenuti secondo necessità. Non farti prendere dal panico che i tuoi utenti rimarranno bloccati su vecchi contenuti, non è il caso.

La memorizzazione nella cache del browser Web è altamente raccomandata per i siti Web WordPress e, in definitiva, il plug-in WordPress Leverage Browser Caching Ninjas consigliato farà il trucco. Installa, attiva e il gioco è fatto!