Google PageSpeed Insights è uno dei numerosi strumenti utili per misurare le prestazioni dei siti web. Tuttavia, alcuni dei suoi suggerimenti – come l’avviso “Sfrutta la Cache del Browser” – possono confondere i proprietari di siti meno esperti.
Quando si interrompe la memorizzazione nella cache, non è così difficile accorgersene. Con alcune modifiche, è possibile implementare sul proprio sito questa best practice di sviluppo per ridurre i tempi di caricamento e migliorare il punteggio di PageSpeed.
In questo articolo, inizieremo con un’introduzione all’avviso Sfrutta la Cache del Browser. Poi condivideremo con voi i nostri suggerimenti per risolvere questo problema sul vostro sito WordPress.
Al lavoro!
Cos’È l’Avviso Sfrutta la Cache del Browser?
Per comprendere l’avviso Sfrutta la Cache del Browser, è utile conoscere prima un po’ Google PageSpeed Insights. Se siete nuovi della piattaforma, vi consigliamo di leggere la nostra guida completa, Google PageSpeed Insights: 100/100 con WordPress.
L’avviso Sfrutta la Cache del Browser (“Leverage Browser Caching”) è uno dei tanti ‘strumenti diagnostici’ utilizzati da Google PageSpeed per suggerire come migliorare il vostro punteggio, come quello che segue:
Nella versione 5 di Google PageSpeed Insights, questo messaggio è stato sostituito con l’avviso “Pubblica le risorse statiche con criteri della cache efficaci”:
Nonostante il cambiamento di lingua e di aspetto, la soluzione a questi avvisi è la stessa.
Google suggerisce di utilizzare la cache del browser per ridurre i tempi di caricamento delle pagine e migliorare le prestazioni. In poche parole, la memorizzazione nella cache è un sistema attraverso il quale i browser degli utenti salvano copie statiche delle pagine del vostro sito. Poi, nelle visite successive, questo contenuto può essere ricaricato più velocemente perché il browser non deve contattare il server del vostro sito per accedere alle risorse richieste.
Tuttavia, ogni risorsa memorizzata nella cache ha bisogno di un periodo di scadenza specifico. Questo dice ai browser quando il contenuto del vostro sito è diventato obsoleto, permettendovi di sostituire la copia in cache con una versione aggiornata.
Se vedete l’avviso “Leverage Browser Caching” nei risultati dei vostri test di performance, probabilmente questo significa una di due cose:
- Dal server del vostro sito o da quello di una terza parte mancano le intestazioni Cache-Control o Expires.
- Gli header necessari sono presenti, ma l’intervallo di validità è molto breve e quindi non ha molto impatto sulle prestazioni.
La soluzione a questo avviso consiste nel risolvere uno o entrambi i problemi.
Come Risolvere il Problema dell’Avviso Leverage Browser Caching in WordPress (3 Metodi)
Ci sono diversi modi per risolvere il problema evidenziato dall’avviso Sfrutta la Cache del Browser in WordPress, a seconda della causa. Ecco tre soluzioni da provare.
1. Aggiungere gli Header Cache-Control e Expires
Ci sono due intestazioni relative alla cache del browser: Cache-Control e Expires. Almeno una delle due deve essere presente per abilitare la memorizzazione nella cache del browser per il vostro sito, in quanto è così che i browser determinano per quanto tempo devono conservare le risorse prima di aggiornarle.
Un modo semplice per determinare se questo è ciò che causa l’avviso Leverage Browser Caching è guardare i dettagli forniti per ogni risorsa. In Google PageSpeed Insights versione 5, invece vedrete “Nessuno” sotto Cache TTL:
Come riferimento pratico, le versioni precedenti di Google PageSpeed Insights mostravano un messaggio “scadenza non specificata” (“expiration not specified”) quando mancavano le intestazioni:
Mentre l’header Cache-Control attiva la cache lato client e imposta la max-age di una risorsa, l’intestazione Expires viene utilizzata per specificare un momento nel tempo da cui la risorsa non sarà più valida.
Non è necessario aggiungerli entrambi, in quanto possono essere ridondanti. Cache-Control è più recente e di solito è quello raccomandato. Tuttavia, alcuni strumenti di performance web, come GTmetrix, controllano ancora gli header Expires.
Se siete su Kinsta, non dovete preoccuparvi di impostare questi header. Tutti i nostri server Nginx li includono già. Anche chi utilizza un Content Delivery Network (CDN) dovrebbe avere già questi header configurati.
Se avete un provider di hosting diverso, ricordatevi di fare il backup del sito prima di seguire i passaggi qui sotto, dato che modificare il file . htaccess potrebbe interrompere il vostro sito se non state attenti.
Come Aggiungere gli Header Cache-Control in Nginx
Per aggiungere gli header Cache-Control in Nginx, potete aggiungere quanto segue al file di configurazione del server:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Questo indica al vostro server che i tipi di file specificati non cambieranno per almeno 30 giorni. Mantiene i relativi file in memoria per quel periodo di tempo prima di aggiornarli.
Come Aggiungere gli Header Cache-Control in Apache
Se invece avete un server Apache, potete aggiungere il seguente codice al vostro file .htaccess:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
Questo frammento deve essere aggiunto prima di “#BEGIN WordPress” o dopo “#FINE WordPress”. In questo caso, la cache è impostata in modo da scadere dopo 84.600 secondi.
Come Aggiungere gli Header Expires in Nginx
Potete aggiungere gli header Expires in Nginx aggiungendo quanto segue al blocco del server. In questo esempio, si può vedere come specificare diversi tempi di scadenza in base ai tipi di file:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Come Aggiungere gli Header Expires in Apache
Potete aggiungere gli header Expires in Apache aggiungendo quanto segue al file .htaccess:
## 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 ##Potete poi controllare i vostri header eseguendo di nuovo il vostro sito attraverso Google PageSpeed Insights e vedere se l’avviso permane.
2. Sfrutta la Cache del Browser per Google Analytics
Ironia della sorte, a volte è Google Analytics a causare l’avviso Leverage Browser Caching e un punteggio di PageSpeed imperfetto. Questo perché ha un tempo di scadenza della cache di appena due ore. Questo era il precedente avviso:
Nella versione 5 di PageSpeed Insights, questo problema non comporta più un avviso, ma Google Analytics potrebbe essere ancora presente in elenco come risorsa non ottimizzata:
Non potrete cambiare la situazione con gli header Cache-Control o Expires perché la risorsa non è sul vostro server. Tuttavia, c’è un modo per sfruttare la cache del browser per Google Analytics ospitando lo script localmente.
Ma siate consapevoli, tuttavia, che questo metodo non è supportato da Google.
Sfruttare la Cache del Browser per Google Analytics con Complete Analytics Optimization Suite
Se volete risolvere il problema di cui sopra, potete utilizzare un plugin gratuito chiamato Complete Analytics Optimization Suite (CAOS) sviluppato da Daan van den Bergh:
Potete scaricare CAOS dalla Directory dei Plugin di WordPress o cercarlo alla voce Plugin > Aggiungi nuovo nella bacheca di WordPress.
Tra i vantaggi aggiuntivi dell’hosting locale del vostro script di Analytics vi è il fatto che riduce le vostre richieste HTTP esterne verso Google da due a uno e vi dà il pieno controllo sulla cache del file. Ciò significa che potete utilizzare gli header della cache come vi abbiamo mostrato in precedenza.
Per iniziare, installate il plugin e poi inserite il vostro Tracking ID di Google Analytics. Il plugin aggiunge al vostro sito WordPress il codice di monitoraggio necessario per Google Analytics, scarica e salva il file analytics.js sul vostro server, e lo mantiene aggiornato utilizzando uno script pianificato in wp_cron().
Consigliamo di impostarlo in modo che carichi nel footer:
Tenete presente che CAOS non funziona con altri plugin di Google Analytics per WordPress.
Sfruttare la Cache del Browser per Google Analytics con WP-Rocket
In alternativa, per raggiungere lo stesso obiettivo, potete utilizzare il plugin di caching di WordPress WP-Rocket:
Il Add-on Google Tracking di questo plugin consente di ospitare localmente il vostro script di Analytics con un semplice clic. Basta attivare lo stato in WP-Rocket > Add-on.
WP-Rocket e il suo add-on sono compatibili con altri plugin di Google Analytics. Come strumento premium, le licenze hanno prezzi che partono da 49 dollari all’anno.
3. Ridurre al Minimo l’Utilizzo di Script di Terze Parti
A volte lo script di Google Analytics può causare problemi per il vostro punteggio di Google PageSpeed Insights perché è ospitato sul server di Google, quindi non avete il controllo della cache.
Lo stesso vale per altri script di terze parti. Se dal vostro sito web WordPress gestite un’azienda, molto probabilmente avete altri script di terze parti in esecuzione per tracciare le conversioni, gli A/B test e altro ancora.
Questo potrebbe riguardare script come i pixel di conversione di Facebook, Crazy Egg, Hotjar e altri. Purtroppo, a meno che non riusciate a trovare un modo per ospitare questi script a livello locale, non c’è molto che si possa fare per ottenerne il controllo.
Un’opzione per gli utenti di Facebook Pixel è utilizzare l’ennesimo add-on di WP-Rocket. In teoria, dovreste ridurre al minimo l’utilizzo di script di terze parti se volete migliorare il vostro punteggio di Google PageSpeed. Quindi potrebbe valer la pena fare un controllo del vostro sito e rimuovere gli script che non sono necessari per l’esecuzione.
Riepilogo
Anche se non è una misura definitiva delle prestazioni di un sito, Google PageSpeed Insights è comunque un buon indicatore di come vanno le cose. Migliorare il vostro punteggio eliminando gli avvisi mostrati alla voce “Pubblica le risorse statiche con criteri della cache efficaci” può aiutarvi a rendere il vostro sito web più veloce e usabile per i visitatori.
Se vedete questo avviso in Google PageSpeed Insights, potete risolvere il problema:
- Aggiungendo gli header Cache-Control o Expires.
- Sfruttando la cache del browser per Google Analytics.
- Riducendo al minimo l’utilizzo di script di terze parti.
Avete altri suggerimenti per risolvere il problema della cache del browser? Fatecelo sapere nella sezione dei commenti qui sotto!
Jon è il Chief Operating Officer di Kinsta e si occupa quotidianamente dei team di vendita, assistenza clienti e supporto tecnico di Kinsta. Jon è un padre famiglia. Quando non batte febbrilmente i tasti del suo portatile, di solito aiuta uno dei suoi figli a riparare una bicicletta o a configurare Netflix per un bambino impaziente.
Lascia un commento