2016-07-14 69 views
21

ho impostato scadenza sul mio httpd.confSfrutta il caching del browser per la 3a parte JS

ExpiresActive On 
ExpiresDefault "access plus 1 month" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" 

Questo aiuta con la cache del browser per le immagini, i file di font, sito proprio file CSS e js. Ma ho anche JS esterni inclusi nel mio sito web:

http://connect.facebook.net/en_US/sdk.js (20 minutes) 
http://apis.google.com/js/client.js (30 minutes) 
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 minutes) 
https://platform.twitter.com/widgets.js (30 minutes) 
https://www.google-analytics.com/analytics.js (2 hours) 

Google Page Speed ​​Insights dice per i file superiori: Impostare una data di scadenza o di un'età massima nelle intestazioni HTTP per le risorse statiche indica al browser di caricare in precedenza risorse scaricate dal disco locale invece che dalla rete.

Come sfruttare la cache del browser in questi file JS esterni? Qualsiasi aiuto ?

risposta

30

Un problema fastidioso, infatti. Non uno che è come facilmente risolvibile ho paura. Ma quello che puoi fare è usare un cron.

In primo luogo, tieni presente che Google è molto improbabile penalizzarti per i loro strumenti (come Analytics). Tuttavia, come accennato in precedenza, può essere risolto utilizzando uno cron, che in pratica significa che si carica localmente JavaScript e si caricano gli script aggiornati.

Come fare questo:

Prima di tutto, è necessario scaricare lo script che si sta eseguendo. Userò Google Analytics come esempio (questo sembra essere lo script più problematico di cui le persone si lamentano, ma è possibile replicarlo per qualsiasi script esterno).

Cerca nel tuo codice e trova il nome dello script, nel nostro caso è: google-analytics.com/ga.js. Inserisci questo URL nel tuo browser e visualizzerà il codice sorgente. Basta fare una copia di esso e salvarlo come ga.js.

Salva questo file JavaScript appena creato sul vostro server web, nel mio caso:

- JS 
    - ga.js 

Successivamente sarà necessario aggiornare il codice nelle pagine che chiedono lo script e basta cambiare la directory che sta chiamando il File JavaScript Ancora una volta nel nostro caso, noi cambieremo questa linea:

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 

a

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js'; 

A questo punto, il tuo sito sarà ora eseguire lo script dal tuo sito web localmente! Tuttavia, questo significa che lo script non si aggiornerà mai. A meno che non si riesegua questo breve processo ogni settimana. Dipende da te ... ma sono troppo pigro per quello.

Questo è dove il CRON entra in gioco:

Quasi ogni singolo servizio di hosting avrà un'opzione per di impostare cron posti di lavoro. Su Hostinger è sul tuo pannello di hosting, su GoDaddy lo troverai sotto l'opzione Contenuto.

Inserire lo script seguente nello cron e tutto ciò che è necessario fare è modificare il percorso assoluto della variabile $localfile. Quello che fa questo script è tirare lo script aggiornato da Google per il file ga.js. È possibile impostare l'intervallo di tempo su quanto spesso si desidera eseguire questo processo. Varia da una volta all'ora a una volta al mese e oltre.

Se si sta eseguendo anche questo per file esterni diversi da Google Analytics, sarà inoltre necessario modificare la variabile $remoteFile. Quindi, $remoteFile è l'URL del file JavaScript esterno e la variabile $localFile metterà il percorso al tuo nuovo file memorizzato localmente, semplice come quello!

<? 
// script to update local version of Google analytics script 

// Remote file to download 
$remoteFile = 'http://www.google-analytics.com/ga.js'; 
$localfile = 'ENTER YOUR ABSOLUTE PATH TO THE FILE HERE'; 
//For Cpanel it will be /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); 
    } 
    } 
} 
?> 

Questo è, e dovrebbe risolvere eventuali problemi con Leverage Browser Caching di script di terze parti.

Fonte: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

NOTA:

In realtà, questi file non tendono ad avere un grande effetto sulla vostra velocità di pagina effettiva. Ma posso capire la preoccupazione che hai con Google che ti penalizza. Ma ciò avverrebbe solo se hai una quantità di LARGE in esecuzione. Nulla di ciò che è collegato a Google non sarà tenuto contro di voi, come ho affermato prima.

+1

Una risposta veramente supurb. Complimenti – Beaniie

+1

Waw ..! Davvero una buona risposta. –

2

Non sono sicuro che questo snippet di codice possa aiutare qualcuno, ma in ogni caso questo è il modo in cui memorizzo in cache un file js esterno.

<script> 
$.ajax({ 
type: "GET", 
url: "https://www.google-analytics.com/analytics.js", 
success: function(){}, 
dataType: "script", 
cache: true 
}); 
</script>