2016-07-14 3 views
21

내 httpd.conf에활용 브라우저 캐싱은 JS

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) 

구글 PageSpeed ​​통계는 상위 파일을 말한다 : 정적 자원에 대한 HTTP 헤더의 유효 기간 또는 최대 보존 기간을 설정 이전에로드 브라우저에 지시 네트워크 대신 로컬 디스크에서 리소스를 다운로드했습니다.

어떻게이 외부 JS 파일을 브라우저 캐시를 활용할 수 있습니까? 어떤 도움?

답변

30

성가신 문제입니다. 하나가 아닌 쉽게 고칠 수 있습니다. 하지만 할 수있는 일은 cron입니다.

먼저 Google은 자신의 도구 (예 : 애널리틱스)에 불이익을 줄 가능성이 매우 낮습니다. 그러나 앞서 언급했듯이 cron을 사용하여 수정할 수 있습니다. 이는 기본적으로 JavaScript를 로컬로로드하고 업데이트 된 스크립트를 가져 오는 것을 의미합니다.

이 수행하는 방법 : 모든

먼저, 당신은 당신이 실행중인 스크립트를 다운로드해야합니다. 예를 들어 Google 애널리틱스를 사용하게 될 것입니다.이 스크립트는 사람들이 불만스럽게 생각하는 가장 문제가되는 스크립트 인 것으로 보이지만 외부 스크립트에 대해서는이 스크립트를 복제 할 수 있습니다.

코드를보고 스크립트의 이름을 찾으십시오. 우리의 경우는 google-analytics.com/ga.js입니다. 이 URL을 웹 브라우저에 넣으면 소스 코드가 나타납니다. 단순히 복사본을 만들고 ga.js으로 저장하십시오.

저장 내 경우에는 웹 서버에이 새로 생성 된 자바 스크립트 파일 :

- 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 작업을 설정하는

은 거의 모든 하나의 호스팅 서비스는 옵션이 있습니다 : 크론은 놀이로 오는 곳

이다. Hostinger에서는 Hosting Panel에 있으며, GoDaddy에서는 Content 옵션 아래에 있습니다.

cron에 다음 스크립트를 입력하고 절대 경로를 변수 $localfile으로 변경하기 만하면됩니다. 이 스크립트가 수행하는 작업은 ga.js 파일에 대한 Google의 업데이트 된 스크립트를 가져 오는 것입니다. 이 프로세스를 실행하는주기에 대한 시간 프레임을 설정할 수 있습니다. 한 시간에서 한 달에 한 번, 한 달에 한 번 이상.

Google 애널리틱스 이외의 외부 파일에도이 작업을 수행하려면 변수 $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); 
    } 
    } 
} 
?> 

Leverage Browser Caching 타사 스크립트로 인해 발생하는 모든 문제를 해결해야합니다.

출처 : http://diywpblog.com/leverage-browser-cache-optimize-google-analytics/

참고 :

는 사실,이 파일이 실제 페이지 속도에 큰 영향을 가지는 경향이 없습니다. 하지만 Google이 귀하에게 불이익을 주었을 때 염려되는 점을 이해할 수 있습니다. 그러나 이러한 외부 스크립트가 많이 실행되는 경우에만 LARGE이 발생합니다. 앞서 언급 한 것처럼 Google과 관련된 모든 사항은 귀하에게 불리하게 적용되지 않습니다.

+1

진정한 답변입니다. 명성 – Beaniie

+1

와우 ..! 정말 좋은 답변입니다. –

2

이 코드 스 니펫이 누군가에게 도움이되는지 확신 할 수 없지만 어쨌든 이것이 외부 js 파일을 캐시하는 방법입니다.

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