Ottimizzare PageSpeed: Sfrutta la cache del browser

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:

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 Cache o W3 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:

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