Использование кэширования браузеров для сторонних JS

Я установил Expiry на свой 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 файлов? Любая помощь?

Ответы

Ответ 1

Досадная проблема, действительно. Я не боюсь, что это не так сильно легко. Но вы можете использовать cron.

Во-первых, имейте в виду, что Google вряд ли будет наказывать вас за свои инструменты (например, Analytics). Однако, как упоминалось ранее, его можно исправить с помощью cron, что в основном означает, что вы загружаете JavaScript локально и вытаскиваете обновленные сценарии.

Как это сделать:

Прежде всего, вам нужно загрузить script, который вы используете. Я буду использовать Google Analytics в качестве примера (это, кажется, самый проблемный script человек жалуется, но вы можете реплицировать это для любых внешних скриптов).

Посмотрите в свой код и найдите имя script, в нашем случае это: google-analytics.com/ga.js. Поместите этот URL-адрес в свой веб-браузер, и он откроет исходный код. Просто сделайте копию и сохраните ее как ga.js.

Сохраните этот вновь созданный файл JavaScript на своем веб-сервере, в моем случае:

- JS
  - ga.js

Затем вам нужно будет обновить код на страницах, вызывающих ваш script, и просто изменить каталог, вызывающий файл 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';

На этом этапе ваш сайт теперь будет запускать script с вашего сайта локально! Однако это означает, что script никогда не будет обновляться. Если вы не будете повторно запускать этот короткий процесс каждую неделю. Это зависит от вас.. но я слишком ленив для этого.

Здесь задействован CRON:

Почти каждый хостинг-сервис будет иметь возможность настраивать задания cron. На Hostinger он находится на вашей панели хостинга, на GoDaddy вы найдете его под опцией Content.

Поместите в cron следующий script, и все, что вам нужно сделать, это изменить абсолютный путь к переменной $localfile. Что делает этот script, вытягивает обновленный script из 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.

Источник: http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

Примечание:

По правде говоря, эти файлы не имеют большого влияния на вашу фактическую скорость страницы. Но я могу понять, что вы беспокоитесь о том, что Google наложил на вас штраф. Но это произойдет, только если у вас было LARGE количество этих внешних скриптов. Все, что связано с Google, не будет против вас, как я сказал ранее.

Ответ 2

Не уверен, что этот фрагмент кода поможет кому-то, но так или иначе я кэширую внешний файл js.

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