Avete appena analizzato il vostro sito WordPress attraverso uno strumento di test di velocità e avete scoperto di aver bisogno di “Aggiungere gli Header Expires” (o “Add Expires Headers” in inglese) al sito WordPress?
Gli header Expires vi aiutano a sfruttare il caching del browser, che vi permette di accelerare i tempi di caricamento del vostro sito. Oltre a questo, fanno anche parte delle raccomandazioni di performance di YSlow, il che significa che influiranno sul vostro “punteggio” di performance analizzato da strumenti come GTmetrix.
In questo articolo, spiegheremo cosa sono gli header Expires e che impatto hanno sul vostro sito. Poi vi mostreremo passo dopo passo come aggiungere gli header Expires in WordPress usando alcuni metodi diversi.
Ma prima, dobbiamo fare una breve deviazione per coprire un altro argomento: il caching del browser.
Cos’È la Cache del Browser?
Prima di poter parlare di header Expires, dobbiamo prima introdurre il concetto di caching del browser. Questo è importante perché gli header Expires vi aiutano a controllare e implementare il caching del browser; quindi se non capite il caching del browser, non potete capire gli header Expires.
In poche parole, il caching del browser permette al vostro sito di dire al browser di chi visita le vostre pagine di salvare certi file sul suo computer locale e caricare quei file locali per le visite successive, piuttosto che scaricarli dal vostro server a ogni caricamento della pagina.
Eliminando la necessità di scaricare il file ogni volta, potete accelerare i tempi di caricamento del vostro sito e ridurre l’uso della banda.
Guardiamo un esempio: l’immagine del logo del vostro sito. Il vostro logo è lo stesso su ogni pagina, quindi non ha senso forzare i browser di chi visita il vostro sito a riscaricare lo stesso file del logo a ogni caricamento di pagina. Con la cache del browser, potreste invece memorizzare il file del logo sui computer locali delle persone che visitano il sito. Una persona che capita sul vostro sito per la prima volta avrebbe comunque ancora bisogno di scaricare l’immagine del vostro logo. Ma per le successive visualizzazioni della pagina, il file verrebbe caricato dalla cache locale del browser.
Cosa Sono gli Header Expires?
Gil header Expires vi permettono di dire al browser web dei visitatori esterni se deve caricare una data risorsa dalla cache locale del browser (come abbiamo discusso sopra) o se deve scaricare una nuova versione dal server web.
Più specificamente, permette di impostare una durata per la versione in cache di diversi tipi di file prima che quel file “scada” e il browser debba scaricarlo di nuovo dal server.
Vediamo un esempio…
Diciamo che volete controllare il comportamento della cache del browser per i file immagine PNG sul vostro sito. Se impostate gli header Expires per i file PNG per la durata di un mese, questo significa che il browser di una persona che visita il vostro sito:
- Caricherà la versione già scaricata dalla cache per un mese dopo l’accesso/download iniziale.
- Scaricherà di nuovo quel file dal server dopo un mese.
Potete impostare diversi header Expires per diversi tipi di file, il che vi dà un controllo granulare sul caching del browser del vostro sito.
Header Expires vs Cache-Control
Mentre l’uso degli header Expires è un modo per controllare la cache del browser su WordPress, non è l’unico modo. C’è anche un’altra tecnica chiamata cache-control.
Cache-control è una tecnica più moderna e offre un po’ più di flessibilità per controllare il comportamento della cache. Per questo motivo, oggi molti siti usano il cache-control, compresi noi qui a Kinsta con la nostra configurazione personalizzata di Nginx.
Tuttavia, gli header Expires offrono ancora tutto ciò di cui la maggior parte dei siti ha bisogno, quindi sono una buona opzione da usare per la cache del browser. Potete anche usarli entrambi, anche se gli header cache-control avranno la precedenza nella maggior parte delle situazioni. Se li usate tutti e due, dovrete assicurarvi di impostare gli stessi valori temporali in entrambi.
Se volete saperne di più su come implementare il cache-control su WordPress, leggete la nostra guida su come sfruttare il caching del browser in WordPress.
Come Correggere l’Avviso “Aggiungi Header Expires” in WordPress
Ora, entriamo nella parte pratica: vi mostreremo come impostare gli header Expires in WordPress.
Ma prima, abbiamo buone notizie. Se state ospitando il vostro sito su Kinsta, non dovete preoccuparvi di impostare gli header Expires perché lo facciamo automaticamente per voi. Pre-configuriamo sia i nostri server che la nostra content delivery network (CDN) per sfruttare il caching del browser, quindi non dovete fare nulla.
Se state ospitando il sito altrove, potete aggiungere gli header Expires al vostro sito WordPress. Potete farlo sia usando il vostro snippet di codice a livello di server (Nginx o Apache) o tramite alcuni plugin WordPress facili da usare.
Come Aggiungere gli Header Expires con .htaccess su Apache Web Server
Se il vostro host web usa il server web Apache, potete aggiungere gli header Expires usando il file .htaccess, che si trova nella cartella principale del vostro server (la stessa cartella che contiene il file wp-config.php).
Ecco cosa dovete fare:
- Connettetevi al vostro server usando FTP con il vostro client FTP preferito
- Individuate il file .htaccess nella cartella principale
- Scaricate una copia di backup del file .htaccess sul vostro computer locale. In questo modo, se qualcosa va storto, potete ricaricare la vostra copia di backup per risolvere qualsiasi potenziale problema.
- Aggiungete lo snippet di codice qui sotto vicino alla parte superiore del file
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Mentre i valori predefiniti dovrebbero funzionare bene per la maggior parte dei siti, è possibile regolare i periodi di tempo per i diversi tipi di file nello snippet di codice secondo le vostre esigenze.
Come Aggiungere gli Header Expires con il File di Configurazione sul Web Server Nginx
Se il vostro host usa il server web Nginx, potete controllare gli header Expires modificando il file di configurazione del vostro server. Come modificare questo file dipende dal vostro host: se avete bisogno di aiuto potete contattare il supporto del vostro host.
Kinsta usa il server web Nginx, ma ricordate che noi configuriamo già tutto per voi, quindi non avete bisogno di aggiungere alcun codice manualmente.
Ecco il codice che dovete usare:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Potete regolare i tempi di scadenza per i diversi tipi di file secondo le vostre necessità.
Come Aggiungere Header Expires con un Plugin per WordPress
Se non vi sentite a vostro agio ad aggiungere da voi il codice per gli header Expires, potete anche trovare alcuni plugin per WordPress che possono fare il lavoro al posto vostro. Alcuni di questi plugin aggiungono gli header Expires, mentre altri usano il cache-control. In entrambi i casi, il risultato finale è che il vostro sito WordPress può beneficiare della cache del browser.
Una soluzione è quella di usare un plugin di caching se il vostro host non ha già implementato il caching al vostro posto. Una grande opzione qui è WP Rocket, che è completamente compatibile con Kinsta. Non appena attivate il plugin, WP Rocket abilita automaticamente il caching del browser per voi; non c’è bisogno di configurare altre impostazioni.
Ecco alcuni altri plugin di caching che possono aiutarvi a implementare gli header Expires e/o il caching del browser:
Se avete già risolto il problema della cache e volete solo un plugin più mirato, due buoni plugin gratuiti sono:
Il plugin Leverage Browser Caching non ha impostazioni: basta attivarlo e comincia a funzionare subito.
Il plugin Add Expires Headers permette di controllare gli header Expires per diversi tipi di file; potete fare queste scelte dalla nuova area Add Expires Headers nella vostra bacheca di WordPress:
Come Verificare Se gli Header Expires Funzionano
Per testare se i vostri header Expires sono configurati correttamente, potete usare questo strumento gratuito di GiftOfSpeed. Una volta inserito l’URL del vostro sito, lo strumento vi dirà due cose:
- La durata della cache per tutti i file del vostro sito.
- Il tipo di cache (dovrebbe dire Expires headers poiché questo è il metodo che avete usato, ma potreste anche vedere cache-control a seconda della configurazione del vostro sito).
Potete anche testare il vostro sito attraverso uno qualsiasi degli strumenti di test di velocità che state usando (ad esempio GTmetrix) e controllare se vedete ancora il messaggio “Add Expires headers”.
Come Testare gli Header Expires con il Terminal
Se preferite testare gli header Expires con un’opzione più tecnica, potete fare una richiesta curl in Terminal a una risorsa statica sul vostro sito, e ispezionare direttamente gli header HTTP. Per esempio, se la vostra regola expires o cache-control copre i file CSS, potete fare una richiesta curl come quella qui sotto.
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssNel nostro caso, la richiesta curl al file style.min.css fornisce la risposta qui sotto:
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Come potete vedere, la risposta include gli header expires e cache-control. In particolare, l’header cache-control mostra un max-age di 315360000 secondi, che indica un tempo di scadenza di un anno.
Come Aggiungere gli Header Expires per Script Esterni
I metodi che vi abbiamo mostrato sopra vi permetteranno di controllare gli header Expires per tutti i file sul server del vostro sito WordPress. Tuttavia, questi metodi non vi permettono di controllare gli header Expires per gli script di terze parti che potreste caricare, come Google Fonts, Google Analytics, ecc.
Per questo motivo, alcuni strumenti di test di velocità potrebbero ancora segnalarlo come un potenziale problema anche se avete già implementato gli header Expires attraverso i metodi di cui sopra.
Ecco alcune soluzioni per i comuni script di terze parti…
Come Aggiungere Header Expires a Google Fonts
Molti siti WordPress si affidano a Google Fonts per i font personalizzati. Questo tipicamente comporta il caricamento dei font dal CDN di Google, il che significa che non sarete in grado di impostare gli header Expires attraverso la configurazione del vostro server.
Una soluzione semplice è quella di ospitare localmente i file dei font, invece di affidarvi al CDN di Google. Per impostarlo, potete usare il plugin gratuito Optimize My Google Fonts (OMGF) su WordPress.org.
Potete anche controllare la nostra guida completa per ospitare localmente i font in WordPress per saperne di più sui pro e i contro di questo approccio.
Come Aggiungere Header Expires a Google Analytics
Se state vedendo problemi relativi al caching del browser e a Google Analytics, potete anche considerare di ospitare localmente lo script di Google Analytics, proprio come vi abbiamo mostrato con Google Fonts.
Ecco alcuni plugin per WordPress che facilitano il raggiungimento di questo obiettivo:
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket con il suo add-on incluso Google Tracking.
Riepilogo
Per ricapitolare, gli header Expires vi aiutano a controllare il comportamento della cache del browser per diversi tipi di file sul vostro sito WordPress.
Al giorno d’oggi, molti siti si affidano agli header cache-control invece degli header Expires perché cache-control è un’opzione più moderna che fornisce più flessibilità. Tuttavia, gli header Expires funzionano ancora bene per la maggior parte dei siti e si possono usare sia gli header Expires che i cache-control allo stesso tempo.
Inoltre, alcuni strumenti di test di velocità ridurranno il punteggio del vostro sito se non implementate gli header Expires, il che potrebbe essere la vostra motivazione principale per impostare questa tattica.
Se ospitate il vostro sito WordPress su Kinsta, non avete bisogno di preoccuparvi degli header Expires perché gestiamo tutto per voi. Tuttavia, se il vostro sito è ospitato altrove, potete aggiungere gli header Expires a WordPress usando gli snippet che abbiamo fornito o uno dei plugin che abbiamo messo in evidenza.
