.htaccess에서 CDN에 대한 레버리지 브라우저 캐싱을 추가하는 방법은 무엇입니까?

Question

내가 JS에 대한

cdn.domain.com/abc.jpg (expiration not specified) 
cdn.domain.com/abc.png (expiration not specified) 

같은 문제, CSS &에

ExpiresActive On 
ExpiresByType image/jpg "access 1 year" 
ExpiresByType image/jpeg "access 1 year" 
ExpiresByType image/gif "access 1 year" 
ExpiresByType image/png "access 1 year" 
ExpiresByType text/css "access 1 month" 
ExpiresByType application/pdf "access 1 month" 
ExpiresByType application/x-javascript "access 1 month" 
ExpiresByType application/x-shockwave-flash "access 1 month" 
ExpiresByType image/x-icon "access 1 year" 
ExpiresDefault "access 2 days" 

내 .htaccess

코드 아래에있는 다른뿐만 아니라.

.htaccess에 넣어야 할 내용은 대부분 A 급을 얻는 것입니다.

Answer 1

CDN에 대한 레버리지 브라우저 캐싱을 사용하려는 경우 Cache-Control, Expires 및 Last-Modified와 같은 일부 캐싱 헤더를 추가하여 파일을 캐시하는 것이 좋습니다.

활용 브라우저 캐싱 사용 Mod_Headers

당신이 공유 서버에있어 귀하의 호스트가 mod_expires가 가능하지 않을 경우, 당신은 여전히 ​​사용할 수있는 Mod_headers를 사용하여 브라우저 캐싱을 활용할 수 있습니다. 테스트 예를 들어 아래

# Leverage browser caching using mod_headers # 
<IfModule mod_headers.c> 
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> 
     Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT" 
     Header set Cache-Control "public" 
    </FilesMatch> 
</IfModule> 
# End of Leverage browser caching using mod_headers # 

:

# 1 YEAR 
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$"> 
Header set Cache-Control "max-age=31536000, public" 
</FilesMatch> 

# 1 WEEK 
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> 
Header set Cache-Control "max-age=604800, public" 
</FilesMatch> 

# 3 HOUR 
<FilesMatch "\.(txt|xml|js|css)$"> 
Header set Cache-Control "max-age=10800" 
</FilesMatch> 

# NEVER CACHE - notice the extra directives 
<FilesMatch "\.(html|htm|php|cgi|pl)$"> 
Header set Cache-Control "max-age=0, private, no-store, no-cache, must-revalidate" 
</FilesMatch> 

테스트 헤더

당신은 확인할 수 있습니다

캐시-Control : max-age 모두 헤더는 실행 파일에 장소에 "말림"명령은 다음과 같습니다 :

curl -I http://foo.bar.netdna-cdn.com/file.ext 

HTTP/1.1 200 OK 
Date: Fri, 16 Sep 2014 14:12:20 GMT 
Content-Type: text/css 
Connection: keep-alive 
Cache-Control: max-age=604800, public ← 1 Week caching time 
Expires: Thu, 21 May 2015 20:00:00 GMT 
Vary: Accept-Encoding 
Last-Modified: Thu, 24 Jan 2013 20:00:00 GMT 
GMT; path=/; domain=.domain.com 
Server: NetDNA-cache/2.2 
X-Cache: HIT 

당신은 코드 아래 사용하고 있습니다 :

브라우저 캐싱 mod_expires가
브라우저 캐싱을 활용하는 가장 일반적인 방법 mod_expires가를 사용하는 것입니다을 사용. .htaccess에 다음 코드를 추가하면 모든 사용자에 대해 브라우저 캐싱이 자동으로 활성화됩니다.

# Leverage browser caching using mod_expires # 
<IfModule mod_expires.c> 
    ExpiresActive On 
    ExpiresByType image/jpg "access plus 1 year" 
    ExpiresByType image/jpeg "access plus 1 year" 
    ExpiresByType image/gif "access plus 1 year" 
    ExpiresByType image/png "access plus 1 year" 
    ExpiresByType text/css "access plus 1 month" 
    ExpiresByType application/pdf "access plus 1 month" 
    ExpiresByType text/x-javascript "access plus 1 month" 
    ExpiresByType application/x-shockwave-flash "access plus 1 month" 
    ExpiresByType image/x-icon "access plus 1 year" 
    ExpiresDefault "access plus 2 days" 
</IfModule> 
# End of Leverage browser caching using mod_expires # 

Answer 2

아마도 호스트에 CDN 파일을 캐시하는 것이 가장 좋은 방법은 아닙니다. CDN 호스트를 활용할 수 있다면 캐시 제어, ,, , Last-Modified 등과 같이 일부 캐싱 헤더를 추가하여 파일을 캐시하는 것이 더 좋습니다.

CDN을 사용하는 모든 사이트에 캐싱 규칙을 추가하는 대신 CDN을 사용하여 캐시 헤더를 추가하기 만하면됩니다.

Answer 3

브라우저 캐싱이란 무엇입니까?

브라우저 캐싱은 로딩 시간을 줄이기 위해 브라우저의 로컬 캐시에 이전에 요청한 파일을 저장하는 프로세스입니다. 파일을 로컬에 저장하면 서버에 보내는 요청 수가 줄어들고 다운로드 할 데이터가 줄어 듭니다.

제대로 브라우저 캐싱을 활용하기 위해 사용할 수 있어야합니다 특정 구성 요소가 있습니다. 예를 들어, 브라우저가 파일을 로컬 캐시에서 검색 할 수 있는지 또는 서버에 요청해야하는지 여부를 결정하는 데 도움이되도록 캐시 유효성 검사기를 지정해야합니다. 또한 자산에 대해 만료 또는 캐시 제어 헤더를 올바르게 설정해야합니다. 둘 다 사용하면 불필요합니다. 또한, Gtmetrix는 Cache Control에 비해 Expires를 선호합니다. 따라서이 기사에서는 브라우저 캐싱을 활용하는 방법을 시연 할 때 Expires 헤더를 사용하는 것에 중점을 둘 것입니다.

캐시 제어
캐시 제어 우리가 우리의 브라우저 캐싱의 좀 더 제어 할 많은 사람들이 쉽게 설치 후 사용 찾을 수 있습니다.

# 1 Year for most static assets 
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> 
Header set Cache-Control "max-age=31536000, public" 
</filesMatch> 

Gzip으로 Comporession는 다른 만료 시간을 설정할 수 있습니다 웹 사이트의 파일에 따라

<ifModule mod_gzip.c> 
    mod_gzip_on Yes 
    mod_gzip_dechunk Yes 
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|asp|html)$ 
    mod_gzip_item_include handler ^cgi-script$ 
    mod_gzip_item_include mime ^text/.* 
    mod_gzip_item_include mime ^application/x-javascript.* 
    mod_gzip_item_exclude mime ^image/.* 
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* 
</ifModule> 

<ifmodule mod_deflate.c> 
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript 
</ifmodule> 

(마 젠토에 유용 바리).
특정 유형의 파일이 더 자주 업데이트되는 경우 더 오래된 만료 시간 (예 : CSS 파일)을 설정합니다.

.htaccess 파일을 엽니 다. (현명 : 실수로 실수로 되돌릴 필요가있을 때를 대비하여 원래 .htaccess 파일의 복사본을 만드십시오).

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

</IfModule> 

그것은 유용 할 수 있습니다 :

지금은 아파치의 헤더 모듈합니다 ('ExpiresActive' 'ON'으로 설정)을 만료 수 있도록, 그래서 당신의 .htaccess 파일에 다음을 추가 할 때입니다

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

# Default directive 
ExpiresDefault "access plus 1 month" 

</IfModule> 

: 그건 당신이 지금 추가 할 것 2 개 행을, 그래서 기본 유효 기간에 대한 "기본 지침"를 추가합니다3210 그것이 기본입니다. 이제 파일 유형 각각에 대해 모든 행을 추가 (당신은 알고 당신이 당신의 파비콘에 대해 이전에 생성 한 사람, 이미지, CSS 및 자바 스크립트).

<IfModule mod_expires.c> 

# Enable expirations 
ExpiresActive On 

# Default directive 
ExpiresDefault "access plus 1 month" 

# My favicon 
ExpiresByType image/x-icon "access plus 1 year” 

# Images 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 

# CSS 
ExpiresByType text/css "access 1 month” 

# Javascript 
ExpiresByType application/javascript "access plus 1 year" 

</IfModule> 

지금 GTmetrix와 다른 테스트를 실행하고 결과를 비교 :이 같은 형태의 코드 조각하게 될 겁니다.

• 한 달의 최소한
• 만료 (권장 모든 정적 자원에 대한 캐싱에 공격적으로

  권장 사항 : 구현이 헤더를 만료 후 이것은 내 테스트 사이트에 대한 결과입니다 액세스 + 1 년)

• 캐싱을 1 년 넘게 설정하지 마십시오! 당신의 웹 사이트의 성능을 향상됩니다 캐싱 (MaxCDN 같은) CDN 통합 같은 많은 기능을 최적의 캐싱 플러그인의

  W3 Total Cache: 한

  워드 프레스 플러그인를 사용

브라우저 캐싱. 다음 재 작성 모듈이 캐싱 작업을 을 완료 필요하므로이 가능 얻기 위해 웹 서버 기술 팀에 문의하지 않으면

주

1. mod_rewrite는 아파치 웹 서버, 에서 활성화되어 있는지 확인 .
2. 경고! 무언가에 대해 앞으로 만료일을 설정 한 다음 해당 파일 중 하나를 업데이트하는 경우 브라우저가 파일을 다시 가져올 수 있도록 파일의 이름을 변경해야합니다.
   예 : 자바 스크립트를 1 년으로 설정하고 자바 스크립트 파일 중 하나를 업데이트하면 실제 파일의 이름을 변경해야합니다. 좋은 방법은 버전 관리, 즉 myfile_v1.2.js이지만 쉬운 방법은 Expires 헤더를 사용하는 것입니다 (설정하려면 ~ 10 년은 절대로 좋은 옵션이 아닙니다).

사이트 개선이 있습니까? 위의 내용은 "레버리지 브라우저 캐싱"및 "만료 헤더 추가"에 나열된 모든 파일을 처리 했습니까? 아래의 의견에 저에게 알려주십시오.