web-dev-qa-db-ja.com

サードパーティJSのブラウザーキャッシュを活用する

Httpd.confに有効期限を設定しました

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"

これは、画像、フォントファイル、サイト独自のcssおよびjsファイルのブラウザキャッシュに役立ちます。しかし、私のウェブサイトには外部JSも含まれています。

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は、上位のファイルについて次のように述べています：静的リソースのHTTPヘッダーに有効期限または最大年齢を設定すると、以前にダウンロードしたリソースをネットワークではなくローカルディスクから読み込むようにブラウザーに指示されます。

この外部JSファイルをブラウザキャッシュに活用する方法は？ヘルプがありますか？

phpapache.htaccesscachinggoogle-pagespeed
27
Vivek Tankaria

厄介な問題、Indeed。 easily修正可能なものではないただし、できることはcronを使用することです。

まず、Googleが独自のツール（アナリティクスのように）に対してペナルティを科すことはほとんどありません。ただし、前述のように、cronを使用して修正できます。これは、基本的にJavaScriptをローカルにロードし、更新されたスクリプトをプルすることを意味します。

これを行う方法：

まず、実行しているスクリプトをダウンロードする必要があります。 Googleアナリティクスを例として使用します（これは、人々が苦情を訴える最も問題のあるスクリプトのようですが、任意の外部スクリプトに複製できます）。

コードを調べて、スクリプトの名前を見つけます。この場合、google-analytics.com/ga.jsです。このURLをWebブラウザーにポップすると、ソースコードが表示されます。単にコピーを作成し、ga.jsとして保存します。

私の場合、この新しく作成されたJavaScriptファイルをWebサーバーに保存します。

- JS
  - ga.js

次に、スクリプトを呼び出しているページのコードを更新し、JavaScriptファイルを呼び出しているディレクトリを変更する必要があります。この場合も、この行を変更します。

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

に

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

この時点で、サイトはWebサイトlocallyからスクリプトを実行します！ただし、これはスクリプトが更新されないことを意味します。この短いプロセスを毎週再実行しない限り。それはあなた次第です。しかし、私はそれに関してはあまりにも面倒です。

これがCRONの出番です：

ほぼすべてのホスティングサービスには、cronジョブをセットアップするオプションがあります。 Hostingerではホスティングパネルにあり、GoDaddyではコンテンツオプションにあります。

次のスクリプトをcronに入れます。必要なのは、変数$localfileへの絶対パスを変更することだけです。このスクリプトは、ga.jsファイル用にGoogleから更新されたスクリプトをプルします。このプロセスを実行する頻度に時間枠を設定できます。 1時間に1回から1か月に1回以上に及ぶ。

Google Analytics以外の外部ファイルに対してもこれを行う場合は、変数$remoteFileも変更する必要があります。 $remoteFileは外部JavaScriptファイルへのURLであり、変数$localFileはローカルに保存された新しいファイルへのパスを配置します。

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

それだけで、サードパーティのスクリプトをキャッシングするブラウザのレバレッジに関する問題を修正する必要があります。

ソース： http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

注：

実際、これらのファイルは実際のページ速度に大きな影響を与える傾向はありません。しかし、Googleがあなたにペナルティを科すことであなたが持っている心配を理解できます。ただし、これは、[〜＃〜] large [〜＃〜]の量の外部スクリプトが実行されている場合にのみ発生します。先ほど述べたように、Googleに関連するものはあなたに対しても保持されません。

42
Joe

このコードスニペットが誰かを助けるかどうかはわかりませんが、とにかくこれは私が外部jsファイルをキャッシュする方法です。

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

WordPressを使用している場合は、これに「外部スクリプトのキャッシュ」プラグインを使用できます。最小限のプラグインコード調整により、Googleのものに加えて他のサードパーティのjavascriptファイルのサポートを追加できます。

0
Ron Warshawsky