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

27

Решение

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

Во-первых, имейте в виду, что Google вряд ли накажет вас за собственные инструменты (например, Google Analytics). Однако, как упоминалось ранее, это можно исправить с помощью 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';

в

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

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

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

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

Поместите следующий скрипт в свой 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 Cache.

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

НОТА:

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

40

Другие решения

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

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

Если вы используете WordPress, вы можете использовать для этого плагин «Cache External Scripts». С минимальной настройкой кода плагина вы можете добавить поддержку других сторонних файлов javascript в дополнение к файлам Google

0
По вопросам рекламы [email protected]