it-swarm.com.de

Browser-Caching für JS von Drittanbietern nutzen

Ich habe auf meiner httpd.conf Ablauf gesetzt

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"

Dies hilft beim Browser-Caching für Bilder, Schriftarten-Dateien, seiten-eigene CSS- und JS-Dateien. Ich habe aber auch externe JS auf meiner Website:

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 Pagespeed Insights sagt zu den oberen Dateien: Durch Festlegen eines Ablaufdatums oder eines Höchstalters in den HTTP-Headern für statische Ressourcen wird der Browser angewiesen, zuvor heruntergeladene Ressourcen von der lokalen Festplatte und nicht über das Netzwerk zu laden.

Wie kann der Browser diese externen JS-Dateien im Cache speichern? Irgendeine Hilfe ?

27
Vivek Tankaria

Ein nerviges Thema. Keiner, der als leicht fixierbar ist, fürchte ich. Sie können jedoch eine cron verwenden.

Erstens: Denken Sie daran, dass es sehr unwahrscheinlich ist, dass Google Sie für ihre eigenen Tools (Like Analytics) bestraft. Wie bereits erwähnt, kann es jedoch mit einer cron behoben werden. Dies bedeutet im Wesentlichen, dass Sie das JavaScript lokal laden und aktualisierte Skripts abrufen.

Vorgehensweise:

Zunächst müssen Sie das Skript herunterladen, das Sie ausführen. Ich werde Google Analytics als Beispiel verwenden (dies scheint das problematischste Skript zu sein, über das sich die Leute beschweren, aber Sie können es für alle externen Skripts replizieren).

Schauen Sie in Ihren Code und finden Sie den Namen des Skripts. In unserem Fall lautet es: google-analytics.com/ga.js. Fügen Sie diese URL in Ihren Webbrowser ein und der Quellcode wird angezeigt. Machen Sie einfach eine Kopie davon und speichern Sie sie als ga.js.

Speichern Sie diese neu erstellte JavaScript-Datei auf Ihrem Webserver. In meinem Fall:

- JS
  - ga.js

Als Nächstes müssen Sie den Code auf den Seiten aktualisieren, die Ihr Skript aufrufen, und einfach das Verzeichnis ändern, in dem die JavaScript-Datei aufgerufen wird. In unserem Fall werden wir diese Zeile noch einmal ändern:

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

zu

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

Zu diesem Zeitpunkt führt Ihre Site jetzt das Skript von Ihrer Website aus local! Dies bedeutet jedoch, dass das Skript niemals aktualisiert wird. Es sei denn, Sie führen diesen kurzen Prozess jede Woche erneut aus. Das liegt an dir .. aber dafür bin ich viel zu faul.

Hier kommt der CRON ins Spiel:

Bei fast jedem Hosting-Service können Sie cron-Jobs einrichten. Auf Hostinger befindet es sich in Ihrem Hosting-Panel, auf GoDaddy finden Sie es unter der Option Inhalt.

Fügen Sie das folgende Skript in Ihre cron ein, und Sie müssen lediglich den absoluten Pfad in die Variable $localfile ändern. Dieses Skript ruft das aktualisierte Skript von Google für die ga.js-Datei ab. Sie können den Zeitrahmen festlegen, wie oft dieser Prozess ausgeführt werden soll. Von einmal stündlich bis einmal monatlich und darüber hinaus.

Wenn Sie dies auch für andere externe Dateien als Google Analytics tun, müssen Sie auch die Variable $remoteFile ändern. $remoteFile ist also die URL der externen JavaScript-Datei, und die Variable $localFile legt den Pfad zu Ihrer neuen lokal gespeicherten Datei fest, ganz einfach!

<?
// 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);
    }
  }
}
?>

Das ist alles und sollte alle Probleme beheben, die Sie mit Leverage Browser Caching von Drittanbieter-Skripts haben.

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

NOTE:

In der Regel haben diese Dateien keinen großen Einfluss auf die tatsächliche Seitengeschwindigkeit. Aber ich kann die Sorge verstehen, die Sie haben, wenn Google Sie bestraft. Dies würde jedoch nur passieren, wenn Sie eine LARGE Anzahl dieser externen Skripte hätten. Alles, was mit Google in Verbindung steht, wird auch nicht gegen Sie verurteilt, wie ich bereits gesagt habe.

41
Joe

Ich bin mir nicht sicher, ob dieses Code-Snippet jemandem helfen wird, aber so cache ich eine externe js-Datei. 

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

Wenn Sie WordPress verwenden, können Sie dazu das Plugin "Cache External Scripts" verwenden. Mit minimalem Plugin-Code können Sie zusätzlich zu den Google-Dateien weitere JavaScript-Dateien von Drittanbietern hinzufügen

0
Ron Warshawsky