Использование кэширования браузера для сторонних 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 ? Любой Помочь ?

2 ответов


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

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

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

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

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

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

- JS
  - ga.js

Далее вам нужно будет обновить код на страницах, вызывающих ваш скрипт, и просто изменить каталог, вызывающий файл JavaScript. Еще раз в нашем случае мы будем менять эту строку:

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

to

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

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

вот где CRON вступает в игру:

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

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

если вы также делаете это для внешних файлов, отличных от 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 кэширования сторонних скриптов.

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

Примечание:

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


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

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