Come sfruttare la memorizzazione nella cache del browser in WordPress (con video)

Ultimo aggiornamento - 8 luglio 2021

Se possiedi o gestisci un sito Web WordPress, ti consigliamo di migliorarne costantemente l'aspetto e il funzionamento. Tuttavia, più plug-in, page builder ed elementi di contenuto utilizzi, più lento diventa il tuo sito web.

E un sito Web a caricamento lento è un grande ostacolo per i visitatori, indipendentemente dall'aspetto del tuo sito Web o da quanto sia essenziale per un lavoro.

Ecco perché la gestione di un sito Web WordPress richiede di utilizzare qualsiasi misura delle prestazioni del sito Web che puoi trovare. E una misura importante che vale la pena prendere è sfruttare la memorizzazione nella cache del browser.

In questo articolo imparerai cosa significa e come puoi sfruttare la memorizzazione nella cache del browser in WordPress.

Che cos'è la cache del browser?

Ogni volta che un utente accede al tuo sito Web, risorse come immagini, JavaScript, CSS e altri devono essere caricate sul proprio computer dal server. Ciò significa che l'utente deve caricare ripetutamente le stesse risorse tra le pagine successive e le visite al sito.

Invio: memorizzazione nella cache.

La memorizzazione nella cache indica il periodo di tempo durante il quale i browser memorizzano localmente le risorse memorizzabili nella cache disponibili sul sito Web. Quando un utente richiede la pagina Web, le informazioni vengono immediatamente recuperate dal suo computer.

In questo modo, puoi sfruttare la memorizzazione nella cache del browser in WordPress per fornire prestazioni del sito Web più veloci.

Puoi utilizzare strumenti come Google PageSpeed ​​Insights e GTmetrix per verificare se il tuo sito Web sfrutta già la memorizzazione nella cache del browser.

Basta incollare l'URL del tuo sito web nel campo fornito e fare clic su "Analizza". Lo strumento fornirà al tuo sito web un punteggio, da 0 a 100 in caso di PageSpeed ​​e un voto alfabetico in caso di GTmetrix.

Lo strumento ti fornirà anche suggerimenti per migliorare le prestazioni del tuo sito web. Un suggerimento comune è quello di scegliere di sfruttare la memorizzazione nella cache del browser in WordPress. Se ricevi questo suggerimento, ecco due modi per farlo.

Sfrutta manualmente la memorizzazione nella cache del browser in WordPress

Puoi sfruttare manualmente la memorizzazione nella cache del browser in WordPress aggiungendo un po' di codice al file .htaccess. In effetti, devi aggiungere tre pezzi di codice per tre scopi diversi:

1. Aggiungi le intestazioni di scadenza
2. Aggiungi intestazioni di controllo della cache
3. Disattiva gli ETag

Per aggiungere questo codice, devi accedere ai file del tuo sito web, cosa che puoi fare accedendo al tuo account di hosting o cPanel. È necessario accedere al file manager e all'opzione "Attiva i file nascosti" nelle impostazioni del sito Web.

Troverai quindi il file .htaccess nella cartella public_html. Fare clic con il pulsante destro del mouse sul file e modificarlo per aggiungere il codice fornito di seguito.

1. Aggiungi il codice di memorizzazione nella cache del browser

Copia il codice qui sotto e incollalo alla fine del contenuto del file .htaccess. Non apportare altre modifiche al file.

 #Personalizza scade inizio cache - regola il periodo in base alle tue esigenze
<IfModule mod_expires.c>
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
ScadeAttivo il
ExpiresByType text/html "accedi a 600 secondi"
ExpiresByType application/xhtml+xml "accedi a 600 secondi"
ExpiresByType text/css "accedi 1 mese"
ExpiresByType text/javascript "accedi 1 mese"
ExpiresByType text/x-javascript "accedi 1 mese"
ExpiresByType application/javascript "accedi 1 mese"
ExpiresByType application/x-javascript "accedi 1 mese"
ExpiresByType application/x-shockwave-flash "accedi 1 mese"
ExpiresByType application/pdf "accedi 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"
ScadeDefault "accesso 1 mese"

</IfModulo>
#Scade la fine della cache

Il codice sopra indica al browser di servire una versione cache della pagina invece di scaricare una nuova versione.

Le impostazioni includono anche i seguenti tempi di aggiornamento/scadenza:

• 600 secondi per HTML
• Un mese CSS e JavaScript
• Un anno per le immagini

Questi periodi di scadenza assicurano che i visitatori non debbano scaricare determinate risorse troppo spesso. Tuttavia, se necessario, puoi facilmente modificare i tempi di scadenza.

2. Aggiungi intestazioni di controllo della cache (Apache)

È necessario aggiungere le intestazioni di controllo della cache per specificare le politiche di memorizzazione nella cache del browser relative a come una risorsa viene memorizzata nella cache, dove viene memorizzata nella cache e l'età massima prima della scadenza. Tuttavia, abbiamo già specificato i tempi di scadenza sopra, quindi non è necessario ripeterli qui.

Copia e incolla il seguente codice:

 # BEGIN Intestazioni di controllo della cache

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "pubblico"
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "pubblico"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "privato"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModulo>
</IfModulo>

3. Disattiva gli Etag

Disattiveremo gli e-tag per costringere i browser a fare affidamento sul controllo della cache e a far scadere le intestazioni invece di convalidare i file. Ecco il codice:

 <IfModule mod_headers.c>
Intestazione non impostata ETag
</IfModulo>
FileETtag Nessuno

Memorizzazione nella cache del browser per il server NGINX

Non sarai in grado di individuare il file .htaccess se il tuo sito web utilizza NGINX. In tal caso, vai su /etc/nginx/sites-enabled/default e incolla il codice qui sotto:

 server {
ascolta 80;
nome_server host locale;
Posizione / {
root /usr/share/nginx/html;
indice indice.html indice.htm;
}
posizione ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
scade 365d;
}
posizione ~* \.(pdf)$ {
scade 30d;
}
}
Aggiungi intestazioni di controllo della cache (NGINX)
posizione ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
scade 90d;
add_header Controllo cache "pubblico, senza trasformazione";
}

Dopo aver modificato NGINX, salva il file per sfruttare la memorizzazione nella cache del browser sul server NGINX.

Sfrutta la memorizzazione nella cache del browser in WordPress utilizzando i plugin

La modifica del file .htaccess può effettivamente essere piuttosto rischiosa, poiché un singolo errore può danneggiare l'intero sito Web. Quindi, se non vuoi rischi inutili, puoi utilizzare plugin come W3 Total Cache e WP Fastest Cache .

Ecco come puoi sfruttare la memorizzazione nella cache del browser utilizzando il plug-in W3 Total Cache, uno dei migliori per il lavoro.

Dopo aver installato il plugin, vai alla sua pagina delle impostazioni. Qui, assicurati che la cache del browser sia abilitata. Quindi, vai alle impostazioni della cache del browser dalla barra laterale. E assicurati che l'intestazione di scadenza, l'intestazione di controllo della cache e l'impostazione delle opzioni e-tag siano abilitate.

Salva le impostazioni se hai apportato modifiche.

Con ciò, hai sfruttato con successo la memorizzazione nella cache del browser sul tuo sito Web WordPress. Puoi assicurarti che sia abilitato utilizzando di nuovo lo strumento Insights o GTmetrix.

Se preferisci una versione video, guarda il video qui sotto:

Ulteriori letture:

• I migliori plugin gratuiti per l'ottimizzazione del database di WordPress nel 2021
• Come abilitare la compressione GZIP sul sito WordPress?