利用第三方JS的浏览器缓存

Question

我在httpd.conf上设置了Expiry

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文件？任何帮助？

Answer 1

一个恼人的问题,确实.我担心的不是那些容易修复的东西.但你能做的就是用a cron.

首先,请记住,Google不太可能因为自己的工具(像Google Analytics)而惩罚您.但是,如前所述,它可以使用a来修复cron,这基本上意味着您在本地加载JavaScript并提取更新的脚本.

这该怎么做:

首先,您需要下载正在运行的脚本.我将使用Google Analytics作为示例(这似乎是人们抱怨的最有问题的脚本,但您可以为任何外部脚本复制此脚本).

查看代码并找到脚本的名称,在我们的例子中是:google-analytics.com/ga.js.将此URL弹出到您的Web浏览器中,它将显示源代码.只需复制一份并保存即可ga.js.

在我的案例中,将这个新创建的JavaScript文件保存到您的网络服务器上:

- 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';

此时,您的站点将在本地从您的网站运行脚本!但是,这意味着脚本永远不会更新.除非你每周重新运行这个短暂的过程.这取决于你......但是我太懒了.

这就是CRON发挥作用的地方:

几乎每个托管服务都有一个选项供您设置cron作业.在Hostinger上,它位于您的主机面板上,在GoDaddy上,您可以在"内容"选项下找到它.

将以下脚本放入您的脚本中cron,您需要做的就是更改变量的绝对路径$localfile.这个脚本的作用是从Google获取更新的脚本ga.js文件.您可以设置运行此过程的频率的时间范围.从每小时一次到每月一次甚至更长时间.

如果您还为Google Analytics以外的其他外部文件执行此操作,则还需要更改变量$remoteFile.所以,$remoteFile是的URL外部JavaScript文件和变量$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);
    }
  }
}
?>

就是这样,并且应该解决您使用Leverage Browser Caching第三方脚本时遇到的任何问题.

资料来源:http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

注意:

实际上,这些文件不会对您的实际页面速度产生很大影响.但是我可以理解你对谷歌惩罚你的担忧.但是,如果你有一个,只会出现大运行这些外部脚本量.正如我之前所说,任何谷歌相关的内容都不会对你不利.