Ottimizzare PageSpeed: Sfrutta la cache del browser

Novembre 12, 2017PageSpeed InsightServerWordpress11

leverage-browser-caching-1200x675.jpg

Sfrutta la cache del browser: cos’è la cache?

Quando un utente decide di collegarsi al nostro sito il suo browser deve scaricare tutti gli elementi di cui sono composte le nostre pagine, in modo da visualizzarne correttamente il contenuto. Questo risulta particolarmente gravoso sia per l’utente con una connessione particolarmente lenta, sia per il server, che si ritrova a gestire molteplici operazioni, aumentando il numero di operazioni e rallentandone lo svolgimento.
La cache del browser fa in modo di alleggerire il numero di richieste della pagina, salvando in locale parte dei contenuti: immagini, CSS, Javascript ed altro. Qualora infatti visitassimo nuovamente il sito (anche solo un refresh della pagina è sufficiente per capire) il caricamento sarebbe decisamente più rapido.

Come faccio a sfruttare la cache del browser?

È possibile settare gli expires header direttamente con una mod di Apache.
Il problema è che il webmaster o il consulente SEO generalmente non hanno accesso a questo genere di risorse. L’esempio che segue viene realizzato quindi attraverso la modifica del file .htaccess, presente nella cartella public_html all’interno della vostra home. Grazie a questo file abilitiamo sia la permanenza delle risorse statiche nella cache del browser che la compressione dei file.
Vediamone il contenuto:

## ENABLE GZIP COMPRESSION ##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## ENABLE GZIP COMPRESSION ##
## CACHE ##
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/x-icon "access 1 year"
#ExpiresByType application/pdf "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"
# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# RSS feed
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
##

In questo modo viene fissata una data di scadenza suddivisa per tipologie diverse di elementi, che non verranno quindi scaricati tutte le volte dal browser. Insomma ci risparmiamo un sacco di tempo e di richieste: basterà cambiare “1 month” con “year” e viceversa per personalizzare il periodo di caching. La configurazione indicata è adattabile tranquillamente ad un normale sito internet o blog.

All’interno dei test effettuati con Google PageSpeed Insight può capitare però di trovarsi in questa situazione:

Vuoi come ottimizzare PageSpeed Insight di Google? Ottimizza WordPress: sfrutta la cache del browser. Leverage browser caching
Leverage Browser Caching: Come sfruttare la cache del browser per migliorare il proprio punteggio nelle statistiche e ottimizzare PageSpeed di Google

Rimane il problema delle risorse esterne: non è possibile infatti ricorrere alla cache quando si tratta di codice che risiede fisicamente su di un altro server e dal quale siamo dipendenti per dei servizi (nel caso dell’immagine Google Analytics, come pure i Google WebFonts).

Il buonsenso ci suggerirebbe di accontentarci di un più che dignitoso 90 nei famigerati test del colosso di Mountain View, però noi vogliamo arrivare a 100,  quindi bisogna trovare un escamotage. per risolvere il problema.

Leggi anche Ottimizzare PageSpeed: Above the fold optimization

Soluzione tramite utilizzo di plugin

A qualcuno piacere vincere facile! A parte gli scherzi, in base alle necessità potremmo essere costretti a risolvere alcuni problemi il più velocemente possibile, quindi potremmo decidere di affidarci a WP Super CacheW3 Total Cache e dedicarci alla loro configurazione per ottenere il massimo dalle nostre pagine. Un altro strumento consigliato è Autoptimize, che rende automatizzato il processo di ottimizzazione delle pagine togliendoci l’onere della revisione manuale del codice. Qualora volessimo trovare un workaround per il caching di Google Analytics consiglio Complete Analytics Optimization Suite (CAOS), che si adatta allo scopo nella maggior parte delle situazioni.

The path of the Left Hand

Uno dei modi per risolvere manualmente e non incorrere in bug dovuti ai frequenti aggiornamenti di Google alle librerie è quello di ospitare direttamente le risorse sul proprio server e creare uno script che le sincronizzi con il server di origine, ovvero quelli di Google.

Inoltre, quando si tratta di inserire il codice per il monitoraggio di Analytics generalmente abbiamo un codice da inserire prima della chiusura del tag /head come questo:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Invece che nell’header andremo ad inserirlo nel footer, in modo che non intralci il contenuto iniziale della pagina. Andiamo nella cartella del tema WordPress che stiamo usando quindi public_html/wp-content/themes/nome_tema e cerchiamo footer.php.
Prima della chiusura del tag footer inseriamo il nostro codice, questa volta personalizzato:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.mio_sito.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Scarichiamo quindi le risorse, ovvero ga.js o analytics.js e copiamo ciò che ci serve nella cartella dove risiede WordPress, aggiustando i permessi e rendendole scrivibili.

Mantenere sincronizzati i file con quelli sul server di origine

Creiamo in public_html un file, che chiamiamo ga-cron.php con all’interno il seguente codice:


<?
// script to update local version of Google analytics script
// Remote file to download
$remoteFile = 'http://www.google-analytics.com/ga.js';
$localfile = 'INSERIRE IL PERCORSO ASSOLUTO';
//Per Cpanel sarà /home/USERNAME/public_html/ga.js
// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$host = $url['host'];
$path = isset($url['path']) ? $url['path'] : '/';
if (isset($url['query'])) {
$path .= '?' . $url['query'];
}
$port = isset($url['port']) ? $url['port'] : '80';
$fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout );
if(!$fp){
// On connection failure return the cached file (if it exist)
if(file_exists($localfile)){
readfile($localfile);
}
} else {
// Send the header information
$header = "GET $path HTTP/1.0\r\n";
$header .= "Host: $host\r\n";
$header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";
$header .= "Accept: */*\r\n";
$header .= "Accept-Language: en-us,en;q=0.5\r\n";
$header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";
$header .= "Keep-Alive: 300\r\n";
$header .= "Connection: keep-alive\r\n";
$header .= "Referer: http://$host\r\n\r\n";
fputs($fp, $header);
$response = '';
// Get the response from the remote server
while($line = fread($fp, 4096)){
$response .= $line;
}
// Close the connection
fclose( $fp );
// Remove the headers
$pos = strpos($response, "\r\n\r\n");
$response = substr($response, $pos + 4);
// Return the processed response
echo $response;
// Save the response to the local file
if(!file_exists($localfile)){
// Try to create the file, if doesn't exist
fopen($localfile, 'w');
}
if(is_writable($localfile)) {
if($fp = fopen($localfile, 'w')){
fwrite($fp, $response);
fclose($fp);
}
}
}
?>

Ora entriamo nel nostro CPanel e andiamo su Cron Jobs:

Vuoi come ottimizzare PageSpeed Insight di Google? Ottimizza WordPress: sfrutta la cache del browser. Leverage browser caching

Selezioniamo la ripetizione ogni 24 o 48 ore (entrambi sono valori accettabili) e come comando inseriamo php /home/nome_utente/public_html/ga-cron.php >/dev/null 2>&1

Voilà! Abbiamo guadagnato un punto in più sul tabellone del PageSpeed Insight!

Ti è piaciuto l’articolo? Commenta nel box qui sotto!

<<Ritorna al blog

11 commenti

  • Luca

    Novembre 14, 2017 at 6:50 pm

    Ciao Marcello.
    L’utilizzo di un .htaccess ad hoc esclude o integra l’utilizzo di un plugin per la cache?
    O meglio, come penso sia la situazione più comune, se ho un plugin di cache, mi conviene anche apportare modifiche al file .htaccess?
    Si rischiano “conflitti”?

    Reply

    • Marcello Romelli

      Novembre 14, 2017 at 6:56 pm

      Ciao Luca. Generalmente i plugin per la cache si prendono la briga di modificare il file .htaccess al posto dell’utente, in modo che non ci si debba “sporcare” le mani con il codice. Se hai un server di prova effettua qualche test sia con il metodo manuale che con quello tramite plugin: riuscirai certamente a risolvere la questione nella maniera che più si addice alle tue necessità.

      Reply

      • Luca

        Novembre 14, 2017 at 7:50 pm

        Grazie, farò qualche test 🙂

        Reply

  • Simone

    Novembre 14, 2017 at 7:19 pm

    Ciao, ottimo articolo, ho una domanda, ma se al posto di analytics utilizzo il google tag manager devo usare lo stesso procedimento?

    Reply

    • Marcello

      Novembre 14, 2017 at 7:43 pm

      Il procedimento riguarda l’host locale di risorse esterne, pertanto dovrebbe essere lo stesso con gtm.js anche se non l’ho testato personalmente.

      Reply

  • Johnk

    Gennaio 4, 2018 at 3:04 am

    Excellently written writeup, doubts all bloggers offered the same content material because you, the internet is actually a greater location. Please maintain it up!

    Reply

  • Smith

    Gennaio 4, 2018 at 3:05 am

    Excellent post. I was checking continuously this blog and I’m impressed! Extremely useful information specially the last part

    Reply

  • marco

    Ottobre 19, 2018 at 6:07 pm

    volevo chiedere una cosa ma le righe inserite nell’htaccess sono valide per tutti i siti fatti in Wp e inoltre da quel che ho capito permettono di non utilizzare plugin giusto?

    Reply

    • Marcello

      Ottobre 19, 2018 at 7:40 pm

      Esatto, i plugin non fanno altro che scrivere questo codice per te!

      Reply

  • Pianeta Svapo

    Gennaio 1, 2021 at 4:41 pm

    Ciao, ho seguito la tua guida sulla modifica del file .htaccess che ho ritenuto molto interessante, volevo chiederti una cosa. Il file che hai trascritto a che riga va inserito in Prestashop? Ho notato un leggero miglioramento ma non eccessivo attualmente la mia velocità misurata su pagespeed è 79 per desktop e 69 per mobile ed è variabile da misurazione in misurazione. Potresti darmi altri consigli per velocizzare la pagina?

    Reply

    • Marcello

      Gennaio 2, 2021 at 12:11 pm

      Il codice che hai trovato può essere tranquillamente usato anche con Prestashop: serve per regolare la permanenza delle risorse statiche nella cache del browser e la compressione dei file, per cui può tornare utile in qualsiasi caso. Il tuo punteggio è piuttosto buono ma si può sempre fare di meglio senza impattare le funzionalità del sito o servizio generico.

      Reply

Lascia una risposta

La tua email non verrà pubblicata. I campi richiesti sono contrassegnati *